ترمینال DevTools

Addy Osmani

DevTools Terminal یک برنامه افزودنی جدید Chrome DevTools است که قدرت ترمینال را به مرورگر شما می آورد. اگر زمانی متوجه شدید که بین Chrome و خط فرمان برای کارهایی مانند: پایین کشیدن دارایی ها، استفاده از git، grunt، wget یا حتی vim در حال جابجایی متن هستید - ممکن است این برنامه افزودنی یک صرفه جویی در زمان مفید باشد.

DevTools Terminal برای بهینه سازی سریع خط فرمان از داخل Chrome هنگام کار بر روی برنامه وب شما مفید است.

پس از استفاده از Copy as cURL در پنل شبکه، می توانم به راحتی دستور کامل را در DevTools Terminal قرار داده و آن را اجرا کنم.

چرا از ترمینال در مرورگر استفاده کنیم؟

در طول توسعه، احتمالاً به کار با چند ابزار مختلف عادت کرده‌اید: ویرایشگر متن خود برای نوشتن، مرورگری برای آزمایش و اشکال‌زدایی و ترمینال برای به‌روزرسانی بسته‌ها، پیچ‌شدن هدر یا حتی فرآیند ساخت با استفاده از Grunt.

اجرای وظایف ساخت با Grunt بدون نیاز به ترک مرورگر.

تغییر زمینه ها بین ابزارها در طول توسعه می تواند باعث حواس پرتی شود و منجر به ناکارآمدی شود. قبلاً در مورد اینکه چگونه (برای انواع خاصی از پروژه‌ها) می‌توانید با استفاده از Workspaces بدون خروج از مرورگر، اشکال‌زدایی و کدنویسی را مستقیماً در داخل ابزارهای توسعه‌دهنده کروم ایجاد کنید، صحبت کرده‌ایم.

گردش کار کامل git نیز امکان پذیر است. برای تفاوت git بعد از نوشتن در یک Workspace عالی است.

DevTools Terminal (توسط دیمیتری فیلیمونوف) این داستان را تکمیل می کند و امکان کدنویسی، اشکال زدایی و ساخت را از داخل همان پنجره فراهم می کند. شما به رنگ‌های تب، ctrl و حتی Git دسترسی پیدا می‌کنید که باعث می‌شود ترمینالی که در جریان کار روزانه خود از آن استفاده می‌کردید، آشنا باشد.

جریان کار

پروژه های جدید را با git clone ، yeoman یا هر ابزار دیگری که از طریق ترمینال قابل دسترسی است شروع کنید.

گردش کار شخصی من برای نوشتن در Chrome اکنون کمی شبیه به این است:

• DevTools Terminal از آن برای git clone مخزن GitHub، touch یک فایل جدید یا اجرای yo (yeoman) برای ایجاد یک برنامه استفاده می کند. اگر بخواهم می‌توانم یک سرور جدید برای پیش‌نمایش برنامه نیز راه‌اندازی کنم
• فضاهای کاری: برنامه وب من را در Chrome ویرایش و اشکال زدایی کنید. اگر من یک سرور را زودتر راه اندازی کنم، می توانم پروژه محلی خود را به فایل های شبکه خود نگاشت کنم. من می توانم از Sass یا Less استفاده کنم و تغییرات پیش پردازنده CSS خود را به فایل های CSS من برگردانم.
• DevTools Terminal: اکنون می‌توانم به کنترل منبع متعهد شوم، از یک مدیریت بسته (npm، bower) برای کاهش وابستگی‌ها استفاده کنم یا فرآیند ساخت خود را اجرا کنم (grunt، make) تا یک نسخه بهینه از همان برنامه تولید کنم.
• اگرچه ممکن است کمی طول بکشد تا به چیدمان پنجره عادت کنم، اما اینکه بتوانم بیشتر آنچه را که نیاز دارم از داخل مرورگر به دست بیاورم، لذت بخش است.

با استفاده از ls ​​نام فایل ها را در فهرست کاری فعلی فهرست کنید. برای تجسم دایرکتوری ها در خارج از فضای کاری شما عالی است.

نصب و راه اندازی

DevTools Terminal را می توان از فروشگاه وب Chrome نصب کرد. اگر کاربر مک یا لینوکس هستید، پس از اینکه آن را به کروم اضافه کردید، می توانید به سادگی "Inspect Element" یا Ctrl + Shift + I برای باز کردن DevTools باز کنید و می توانید از طریق ابزار جدید به آن دسترسی داشته باشید. برگه ترمینال. کاربران ویندوز باید افزونه را با استفاده از یک پروکسی Node.js به ترمینال سیستم متصل کنند. برای دریافت این تنظیمات، ماژول devtools-terminal را از npm نصب کنید: npm install -g devtools-terminal

سپس یک پنجره خط فرمان جدید باز کنید و devtools-terminal اجرا کنید. سپس DevTools را باز کنید و در تب "Terminal" با استفاده از گزینه های تنظیمات پیش فرض به سرور متصل شوید. در صورت نیاز می توانید پورت و آدرس بیشتری را سفارشی کنید.

محدودیت ها

DevTools Terminal دارای چند محدودیت است که شایان ذکر است. برخلاف Terminal.app یا iTerm2 در مک، هنوز از تب ها، چندین پنجره یا بازپخش سابقه پشتیبانی نمی کند. با این حال، می‌توانید هر تعداد برگه جدید Chrome را که دوست دارید باز کنید، که هر کدام می‌توانند نمونه DevTools Terminal خود را داشته باشند. این را می توان از صفحه برنامه های Chrome انجام داد:

در حال حاضر، افزونه هم از تم روشن پیش‌فرض و هم از تم تیره پشتیبانی می‌کند.

این برنامه افزودنی در حال حاضر به NPAPI متکی است که در سال آینده به نفع Native Messaging API حذف می شود. دیمیتری فیلیمونوف، نویسنده DevTools Terminal قصد دارد در آینده نزدیک از NPAPI به نفع این API یا Native Client API دور شود.

نتیجه گیری

DevTools Terminal (و افزونه‌های مشابه آن، مانند Auxilio ) می‌تواند به شما کمک کند از جابجایی بین ویرایشگر، مرورگر و خط فرمان خود در طول توسعه اجتناب کنید. در حالی که یک پایانه درون مرورگر ممکن است فنجان چای همه افراد نباشد، ممکن است افزونه را مکمل مفیدی برای گردش کار خود بیابید و ما شما را تشویق می کنیم آن را امتحان کنید و ببینید که چگونه آن را دوست دارید!