إذا كنت مطور ويب ، فأنا متأكد من أنك على دراية بأدوات مطوري Chrome. لديهم قائمة كبيرة من الوظائف لمساعدة مطور الويب. لكن الكثيرين يستخدمون الحد الأدنى ، فقط لإكمال المهمة المطروحة.
في هذه المقالة ، أقدم عشر نصائح للعمل مع أدوات مطور Chrome لمساعدتك في الارتقاء بإنتاجيتك إلى المستوى التالي.
1. قائمة الأوامر
, (VS Code) - . . , ctrl + shift+p, . , Chrome.
, HTML web-. , :
1.
2. ,
3. ctrl + shift+p Screenshot
, .
2.
web-, . , . , .
,
. Error, warn info . Chrome Dev Tools console.info, console.warn console.error. .
, , . console.log. . console.table , .
CSS , .
, / , . : console.group, console.groupCollapsed console.groupEnd.
JavaScript, console.time console.timeEnd, .
3. fetch / cURL / NodeJS fetch
API , , Postman cURL . , URL-, , fetch, cURL NodeJS fetch, Network Chrome Dev Tools.
4.
- HTML, . Chrome Dev Tools $0 .
5.
, Chrome Dev Tools. , , Chrome Dev Tools .
, , , , . , .
DOM
, DOM. , . Chrome Dev Tools , HTML- .
, Chrome Dev Tools XHR, , Event Listener.
6.
-, , , JS, . Chrome Dev Tools, . , . .
7.
- . , , Chrome. , , , « ».
hover, active, focus, focus-within visited.
8.
-, , . . “ ” "", .
9.
Chrome, . . , . , , . , , .
10.
HTML, , . , designMode, . , .
document.designMode="on"
تعد Chrome Developer Tools أداة قوية جدًا لأنها تأتي مع عدد من الميزات لمساعدة المطورين على إنشاء التطبيقات بسرعة. لقد اخترت اليوم عشر نقاط من شأنها أن تساعد المطورين بشكل كبير. ومع ذلك ، هناك العديد من الميزات التي لا تقل قيمة. شارك في التعليقات ما تستخدمه.
من المترجم:
آمل أن يحظى هذا المقال بإعجابكم. لقد قمت ببث هذا والعديد من المقالات المفيدة الأخرى لمطوري Frontend المبتدئين على قناة Frontend.school () Telegram ، حيث أقوم أيضًا بإعداد اختبارات مفيدة لاختبار معرفتي.