ما هي الميزات التي لا تملكها Firebug أدوات مطور Chrome؟ [مغلق

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

سؤال

أنا مطور ويب مبتدئ ، وقد أوصيت Firebug بتصحيح الأخطاء عدة مرات. ومع ذلك ، حتى الآن ، كنت فقط أستخدم أدوات المطورين المدمجة في Chrome. يبدو أنه يفعل كل ما يفعله Firebug ، وهو أكثر نظافة وأكثر تنظيماً كمكافأة.

مع تقدمي أكثر في تصحيح الأخطاء ، هل هناك ميزات تتمتع بها Firebug والتي سأفتقدها مع DevTools Chrome؟ إذا كان الأمر كذلك، ما هي؟

متعلق ب: مصحح أخطاء يشبه Firebug لـ Google Chrome

هل كانت مفيدة؟

المحلول

لقد استخدمت Firebug من البداية وكانت هبة من الله مثل اختراع النار. ولكن بعد ذلك خرج Chrome مع تصحيح الأخطاء وجربته. ظللت أستخدم Firebug ، لكنني راقبت أدوات Dev الخاصة بـ Chome وأخيراً لم يعد بإمكانها الخروج سببًا لعدم التبديل بعد إضافة أدوات JSON في الإصدار 12.

ركلة DevTools Chrome لأنها تحتوي على:

  • بنيت في الجدول الزمني ومحلل البروفيلر ومحلل الكومة
  • أداة تدقيق مدمجة
  • يمكن الوصول إلى وتحرير محلي/SessionStorage ، ملفات تعريف الارتباط ، SQLLITE DB ، WebSQL ، AppCache وما إلى ذلك ...
  • شبكة WebSockets استنشاق
  • JS Debugger لديه بعض الميزات (مثل نقاط توقف العاملين على شبكة الإنترنت)
  • JS Debugger دعنا نحرر JS على الطيران وقم بتشغيله (JSFIDDLE w/o الكمان)
  • كل نافذة تحصل على نافذة devtools إذا أردت ؛ Firebug هو singleton
  • Firebug يرفرف الصفحة عن طريق إبطاء تحميلها وحقن CSS لميزة المفتش

استكمال: بعد عامين ، يجب أن أهنئ فريق Firefox على تحقيق نجاحات كبيرة. ومع ذلك ، فإن فريق Chrome و Debugger يقومون بقطفات كبيرة إلى الأمام على أساس شهري ، حيث قاد هذه الصناعة. سأقوم بتحديث القائمة أعلاه ، ولكن بصراحة سوف تملأ الصفحة بأكملها.

نصائح أخرى

لم أواجه ميزة Firebug التي فاتني بعد التحول إلى Chrome.

أشعر براحة أكبر بكثير باستخدام Firebug. لا أستطيع التفكير في التفاصيل في الوقت الحالي ، لكن في بعض الأحيان سأحاول تصحيح شيء ما في Safari أو Chrome ويبدو وكأنه pita لدرجة أنني أطلق Firefox وأحصل على أي شيء يتم القيام به بسرعة.

علامة التبويب DOM هي زائد ، لأحد. إنه أكثر سهولة ووضعه بشكل جيد من مكافئ Chrome. أنا أفضل طريقة تسجيل DOM وغيرها من كائنات JS إلى وحدة التحكم في Firebug أيضًا.

Firebug المكونات الإضافية مثل Pixel Perfect مفيدة للغاية أيضًا. لا أعرف ما إذا كانت هناك أي أداة من هذا القبيل للكروم.

بشكل عام ، لا يهم لأنه يجب عليك الاختبار في كلا المتصفحين ، على أي حال. ومع أي ، قد تقارنها أيضًا بأدوات DEV الخاصة بـ IE (التي تحسنت ، ولكنها لا تزال غير جيدة مقارنة بـ FF أو WebKit's).

لا أعتقد أن هناك أي شيء متقدم على وجه الخصوص في Firebug ولكن ليس في Chrome أنك ستفتقد.

استولت أدوات مطور Chrome على ميزات Firebug ، وبالتالي فإن جميع الميزات الرئيسية والألفة موجودة (مثل $0, ، و console هدف).

هناك بعض الاختلافات الصغيرة ، مثل DevTools ليس لها ملف CSS لوحة (على الرغم من أن أوراق أنماط CSS يمكن معالجتها في عناصر فريق).

أدوات Chrome بالإضافة إلى ذلك الجدول الزمني, مظهر و تخزين لوحات. ال الجدول الزمني سجلات اللوحة تحميل ، عرض CSS ، وجافا سكريبت. ال الملف الشخصي ملفات تعريف اللوحة استخدام الموارد و تخزين تعرض اللوحة وتسمح بتغييرات في قاعدة بيانات الموقع والتخزين المحلي وتخزين الجلسة وملفات تعريف الارتباط.

أخيرًا ، يتمتع كلتا الأداة بتباينات بسيطة خاصة بهما ، مما يجعل الإجراءات المختلفة أسهل قليلاً أو أصعب. نصيحتي هي استخدام Firebug for Firefox ، و DevTools لمتصفحات WebKit ، نظرًا لأن Firebug Lite تعمل فقط على Chrome ، وتفتقر إلى العديد من الميزات التي تحتوي عليها Firebug العادية (و DevTools مدمجة في Chrome).

تعديل: كان هذا صحيحًا ، لكن أدوات Dev Chrome نفذت ذلك.

يمكن Firebug البحث في جميع البرامج النصية المحملة على الصفحة. يمكن لأدوات Chrome Dev البحث فقط في البرنامج النصي المحدد حاليًا ، AFAIK.

بقدر ما أستطيع أن أقول ، فإن Firebug هو الوحيد الذي يمكنه تحرير HTML-Code و Text Live وأنت تكتبه. مفيد للغاية ، إذا كنت على سبيل المثال تحاول معرفة كيف سيناسب النص في حاوية وإضافة حرف واحد في وقت واحد.

في Chrome عند تحرير HTML ، يجب عليك الضغط على علامة التبويب أو الإدخال للخروج من "وضع التحرير" ، ومشاهدة التغييرات في صفحتك.

في Firebug ، يمكنك أيضًا الدخول إلى HTML-Code على الفور. في Chrome ، يجب عليك النقر بزر الماوس الأيمن واختيار "تحرير HTML". خلاف ذلك ، سوف تظهر مثل u003Cb>جريئةu003C/b> .

أريد حقًا التغيير إلى Chrome ، لأنه يبدو أنه يعمل بشكل أسرع ، لكن التحرير المباشر مهم للغاية بالنسبة لي.

يعد Firebug اختيار الماوس رائع ، لكن لا يمكنني العثور عليه في أدوات مطور Chrome.

إنه يزعجني لأنني لا أستطيع العثور على مفتاح ساخن له في Firebug ، في حين أن Chrome يفتقر إليه تمامًا.

أنا مطور noob ، لذلك لا يزال يستخدم الماوس معظم الوقت عند التطور.

في الوقت الذي تم طرح هذا السؤال ، كان Firebug وحشًا ، ولكن الآن أدوات مطور Chrome (DevTools) مفيدة لمطوري الويب. على الرغم من أنني لا أتعامل مع Firebug لأنني تعلمت تطوير الويب باستخدام Firefox مع Firebug.

لقد كانت أداة رائعة لتطوير الويب وقدمت جميع الميزات الرئيسية لـ DevTools و Firefox's DevTools. ومع ذلك ، فقد تحولت إلى DevTools Chrome على الرغم من أنها لا تغطي جميع ميزات Firebug ، لأنها مرجحة خفيفة وأسرع بكثير من Firebug ، يمكن الوصول بسهولة إلى محليها ويتم تنظيم المصادر هناك في رأيي.

هنا سأدرج كيف تكون الميزات فريدة من نوعها في Firebug ،

  • يبحث:

    خيار البحث محدد جيدًا في Firebug ، لأنه يمكن الوصول إليه بسهولة ويمكننا البحث في الكلمات الرئيسية حساسية الموضوع و تعبير عادي.

  • دوم:

    يمكن الوصول بسهولة إلى بنية DOM في Firebug مع مختلف خيارات التصفية مثل إظهار الخصائص المعرفة من قبل المستخدم, إظهار الوظائف المعرفة من قبل المستخدم وهلم جرا.

  • بسكويت:

    يتيح لنا Firebug إنشاءنا ملفات تعريف الارتباط الخاصة ويعطي الحكم ل تصدير ملفات تعريف الارتباط.

  • الشبكة/الشبكة:

    Firebug لديه شبكة لوحة أين تسميها DevTools شبكة الاتصال. كلاهما مفيد لتحليل جميع الطلبات المقدمة لتحميل الموارد وحالتها. في Firebug ، يمكننا بسهولة فهم الموارد " الملكية الفكرية عن بعد.

  • مصادر:

    على الرغم من أن تحرير المصدر متوفر في DevTools ، أشعر أن Firebug أفضل أثناء الاستخدام تحرير المصدر, ، لأنه إذا كنت ترغب في تحرير ملف CSS داخل DevTools ، فيجب عليك الذهاب إليه مصادر لوحة ، ثم اضغط كنترول+س للعثور على الملف. عندها فقط يمكنك تحرير الملف. في Firebug يمكنك بسهولة العثور على تحرير المصدر تحت كل علامة تبويب قائمة.

  • دعم دوجو:

    بمجرد أن كنت مطور Dojo كان Firebug امتدت بسهولة لدعم تطوير دوجو باستخدام Dojo Firebug تمديد.

يحتوي Firebug 2.0 المواضيعي على العديد من الميزات الصغيرة ، التي لا تملكها DevTools Chrome. بعضها مدرج هنا:

وحدة التحكم فريق

لغة البرمجة فريق

CSS فريق

دوم فريق

  • يعرض جميع خصائص DOM في مكان واحد
  • عروض الإغلاق
  • يسمح بتصفية الشاشة عن طريق الخصائص والوظائف وما إلى ذلك.

شبكة فريق

  • يسمح بالتوقف على xmlhttprequests
  • يعرض معلومات ذاكرة التخزين المؤقت لكل طلب

بسكويت فريق

  • قم بإنشاء ملفات تعريف الارتباط وتحريرها
  • السيطرة على أذونات ملفات تعريف الارتباط
  • يظهر حجم ملفات تعريف الارتباط الخام والمنسقة
  • يسمح بإيقاف تنفيذ البرنامج النصي عند تغيير ملفات تعريف الارتباط
  • تصدير ملفات تعريف الارتباط بتنسيق قياسي

عام

  • افتح HTML و CSS و JavaScript في محرر خارجي
  • يسمح بتخصيص اختصارات

"ميزة" تتجاوز قابلية الاستخدام هي أن Firebug المصدر المفتوح. حتى يتمكن الجميع من المشاركة في ذلك.

بعد قولي هذا ، فإن DevTools Chrome (وكذلك Firefox Devtools) لديها العديد من الميزات وغيرها من المزايا الأصغر والأكبر على Firebug لأن الفريق الذي يقف خلف Firebug صغير جدًا مقارنة بالفرق التي تقف خلف DevTools الأخرى.

ايضا، يدمج Firebug 3+ في Firefox DevTools المدمجة, ، مما يعني أن هذه الإصدارات ترث جميع ميزات Firefox DevTools وقد تضيف ميزات إضافية.

Firebug لديه إمكانية أن ترفع مكون إضافي آخر مثل Firecookie. بالنسبة للباقي ، فهي متشابهة إلى حد ما ، الأمر كله يتعلق بالذوق في رأيي.

أضف أيضًا أنه يمكن لـ Xopy XPath إضافة محدد CSS لعنصر HTML.

هذا حقا مفيد في بعض الأحيان! :))) ها ها ها ها

أعتقد أن أدوات التطوير متشابهة ، لكنني واجهت مشكلة في إجبار Chrome على عدم تخزين أي شيء. حتى تعيين إعداد "تعطيل ذاكرة التخزين المؤقت" Chrome لم ينجح 100 ٪ من الوقت ؛ لست متأكدا لماذا.

لم يكن لدي هذه المشكلة مع Firefox/Firebug ، لذلك ما زلت أستخدمها.

إضافة سنتات قليلة ...

  1. لم يتمكن Chrome Inspector من فرز خصائص CSS أبجديًا حيث يمكن أن يفعل Firebug مثل السحر. يساعد ذلك عند فحص بعض عناصر CSS وتحتاج إلى الاستيلاء على Firebug يكون مفيدًا في هذا الشأن.

    وفقًا لممارسة ترميز CSS الجيدة ، من الأفضل دائمًا أن يتم فرز خصائص CSS أبجديًا في الكود الخاص بك.

  2. عندما تعمل في مشروع متورط مع الكثير من البرامج النصية. في Firebug ضمن علامة البرنامج النصي ، لديك خيار للبحث عن ملف JS في مربع الاقتراح المقدم. عندما يكون لديك Chrome طريقة عرض شجرة عرجاء لتحديد موقع ملف JS الخاص بك وهو أمر مملي لرؤية أسماء ملف JS الخاص بك وتجتاز الشجرة.

    قد لا يؤثر هذا الخيار على أي شخص يتضمن ملفات JS الصغيرة في مشروعه. هذه الميزة عبارة عن ضجة مع Firebug التي أستخدمها عندما تكون البرامج النصية الخاصة بي أكثر من 1000 ملف JS.

قامت المفتاح تقريبًا اليوم ، لكنني لاحظت أنه لا يمكنني النقر بزر الماوس الأيمن على CSS المعدلة في Chrome ونسخ القاعدة أو إعلانات النمط كما أستطيع في Firebug. الله أتمنى ألا يبدأ Firefox فجأة في امتصاص أو لن أواجه هذه المشكلة.

مع تصحيح الأخطاء Chrome ، يمكنني تصحيح JSNI لمشروع GWT الخاص بي حيث تُظهر Firebug وظيفة مجهولة ولا أتعرف حقًا على وظيفة الفعلي على الإطلاق.

أحب أداة Chrome Dev ولكن في وقت ما فاتني هذه الميزة القوية من Firebug.

  • نقطة توقف مشروطة : وقفة فقط على حالة محددة.
  • مكالمات وظيفة التسجيل : حدد الوظيفة وشاهد كل ما تريد معرفته في وحدة التحكم.
  • كسر تغيير الممتلكات : مارك كائنات وتصحيح الأخطاء سوف يتوقف إذا تم تغيير الممتلكات.

ميزة طلب "تحرير وإعادة الإعادة"

بفضل ميزة "تحرير وإعادة الإيداع" في أدوات مطور Firefox (إعادة تشغيل XHR أو شيء ما في Firebug) ، يمكنك إعادة تشغيل طلب XHR مع تغييرات في الطلب بما في ذلك رؤوس الطلب ، وطلب الجسم ، وطريقة HTTP وحتى عنوان URL. يعيد إعادة تشغيل XHR من Google Chrome ببساطة الطلب ، ولا يسمح بأي تعديلات على الطلب.

يمكنني استخدام Firefox DevTools عندما أحتاج إلى هذه الميزة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top