اليوم نحن في طريقنا لنلقي نظرة على كيفة تبسيط تطوير صفحات الواب. هناك بعض الخطوات المشتركة ونحن جميعا نستخدامها تقريبا:
- تجربة تغييرات على ستايل، برامج نصية أو علامات باستخدام بعض الأدوات على شبكة الإنترنت
- عودة إلى محرر نص لتطبيق هذه التغييرات وحفظها
- تحديث المتصفح لضمان تم حفظ التغييرات
- متابعة التصحيح
بينما يسير العمل بشكل جيد ، حيث يمكن إجراء تسهيلات كثير بفضل التوسعة الجديدة لجوجل كروم يسمى كروم DevTools الحفظ التلقائي ( بواسطة نيكيتا فاسيلييف ) .
الكروم DevTools الحفظ التلقائي يسمح لك لإجراء تغييرات الحية ل CSS وجافا سكريبت للملفات المحلية وحفظها مباشرة من داخل أدوات المطور كروم.
هذا يزيل الحاجة إلى التبديل باستمرار ذهابا وإيابا بين النص المحرر و المتصفح لإجراء هذه التغييرات، ويمكن أن تجري التغيير و الحفظ في وقت واحد لكل التفاصيل عن طريق الحفظ التلقائي.
كيف يعمل؟
الحفظ المحلي للملفات (الحفظ التلقائي) بفضل onResourceContentCommitted في كروم 15 +، التي تطلق كلما تم إجراء تغييرات على CSS وجافا سكريبت لصفحة. واستخدام الحدث نفسه يبدو قليلا مثل هذا:
chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(event) { //event.url //event.type // 'script', 'stylesheet' or 'document' (happens when you add new CSS rule) event.getContent(function(content) { //content - all the content of updated file as a string });});
تمديد نفسها تعتمد على الخادم المحلي العقدة تشغيل (التي سنناقش قريبا). دفعت التغييرات التي تم إجراؤها من داخل أدوات المطور كروم إلى الخادم ثم يحل عناوين المواقع المحلية من هذه الملفات والكتابة القديمة مع تلك الجديدة.
ملاحظة: بالنسبة لإصدار سابق من الكروم، لقد تم استخدام الحفظ التلقائي مع كروم الكناري يبني والتي يمكنك انتزاع من هنا.
الحصول على الإعداد
عملية التثبيت للكروم DevTools الحفظ التلقائ ربما تستغرق أقل من 3-5 دقائق. على افتراض لديك حق الوصول إلى أو قد قمت بتثبيت كروم 15 +، خطوات الإعداد هي على النحو التالي:
- تركيب وتمديد
- افتح chrome://flags/ وتمكين ملحق واجهات برمجة التطبيقات التجريبية "Experimental Extension APIs" (فهو لن يعمل دون هذا!)
- أعد تشغيل المتصفح
- تحميل الإرشاد وتثبيته
تثبيت الخادم (SERVER)
الحفظ التلقائي يستخدم الخادم المحلية لحفظ الملفات. لتثبيت، ببساطة اتبع الخطوات التالية:
- تثبيت Node.js إذا لم يكن لديك بالفعل.
- تشغيل npm install -g autosave ي في محطة / وحدة التحكم.
استعمال
تشغيل chrome-devtools-autosave-server/index.js من سطر الأوامر ثم ببساطة فتح الصفحة المحلية التي ترغب في تحريرها. طالما تستطيع الوصول إليه باستخدام file:/ /، يجب أن تكون قادرة على اتخاذ بسهولة التغييرات من داخل كروم ويكون لهم الحفظ على الفور إلى CSS المحلية أو نسخ جافا سكريبت لتلك الملفات. انها بسيطة على هذا النحو!
خصائص البرو
- الحفظ التلقائي لتحديث ملف محلي، فإن الإخطار 'المحفوظة على <filetype> إلى <filename>' أن يكون الناتج في وحدة التحكم. لا تحتاج للحفاظ على مراقبة مستمرة لهذا، لكن إذا كنت تفضل تجنب تنعيش الصفحة لمعرفة ما إذا تم حفظ التغييرات، من المؤكد انها بديل.
- ليس فقط الحفظ التلقائي لكن يمكن أيضا تمكنك من القيام بما يلي:
- إضافة التعليقات مثل / * مرحبا العالم * /
- تحرير خصائص متعددة في نفس الوقت. على سبيل المثال إذا أردت أن تضيف قيمة لخلفية الصورة ثم إضافة تجاوز لهذه القيمة إذا كان المتصفح يدعم CSS3 التدرجات (القديمة خدعة التحسين التدريجي)، وهذا هو أيضا المدعومة:
background-image: url(some_gradient.png);background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.03, #6E9577), color-stop(0.52, #8FB39B))- تحديث قائمة وظائف جافا سكريبت دون الحاجة إلى إعادة تحميل الصفحة على الإطلاق. بالتأكيد مفيدة.
- خدعة لم أرى توثيق عليها: على الرغم من أن التغييرات قد تكون إلى الملفات المحلية على الفور، إذا كنت أعود إلى علامة التبويب الموارد بعد إجراء تغيير وانقر على السهم المنسدل بجانب أي معدات الشكل أو تعديل النصوص، يمكنك الحصول على نسخة من التاريخ ما كنت قد المحدثة (طالما أنك لم تحديث). هذه ليست محددة لهذا التمديد، ولكن مفيد إذا قمت بطريق الخطأ من حفنة من الأشياء التي ترغب في العودة إليها.
الاستنتاجات
هذا كل شيء. شخصيا وجدت الحفظ التلقائي مفيدة جدا للعمل على المشاريع الصغيرة.
إذا اخترت لاستخدامه، فقط نأخذ في الاعتبار أنه على الرغم من أننا عادة ما تستخدم لاستخدام أدوات المطورين لتصحيح الأخطاء أو التجريب، إزالة القواعد كلها في الأنماط الخاصة بك (حتى لو مجرد محاولة شيء).
طالما كنت على بينة من هذا، انها أداة أنيق حقا أن يكون في حزام المرافق الخاصة بك وأنا سعيد أن أوصي بها. الرجاء مساعدتنا على نشر المقال إذا وجدت أنه من المفيد.
0 التعليقات:
إرسال تعليق