Jika Anda seorang pengembang web, saya yakin Anda sudah terbiasa dengan alat pengembang Chrome. Mereka memiliki banyak sekali fungsi untuk membantu pengembang web. Tetapi banyak yang menggunakan minimum, hanya untuk menyelesaikan tugas yang ada.
Dalam artikel ini, saya menyajikan sepuluh tip untuk bekerja dengan alat pengembang Chrome untuk membantu Anda meningkatkan produktivitas dan membawanya ke tingkat berikutnya.
1. Menu perintah
, (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"
Alat Pengembang Chrome adalah alat yang cukup kuat karena dilengkapi dengan sejumlah fitur untuk membantu pengembang membangun aplikasi dengan cepat. Hari ini saya telah memilih sepuluh poin yang akan sangat membantu pengembang. Namun, ada banyak fitur yang sama berharganya. Bagikan di komentar apa yang Anda gunakan.
Dari penerjemah:
Saya harap Anda menikmati artikel ini. Saya menyiarkan ini dan banyak artikel berguna lainnya untuk pengembang Frontend pemula di saluran Telegram Frontend.school () , di mana saya juga menyiapkan kuis yang berguna untuk menguji pengetahuan saya.