Se você é um desenvolvedor da web, tenho certeza de que já está familiarizado com as ferramentas de desenvolvedor do Chrome. Eles têm uma grande lista de funções para ajudar um desenvolvedor da web. Mas muitos usam o mínimo apenas para fazer o trabalho.
Neste artigo, apresento dez dicas para trabalhar com ferramentas de desenvolvedor do Chrome para ajudá-lo a levar sua produtividade para o próximo nível.
1. Menu de comando
, (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"
As Ferramentas do desenvolvedor do Chrome são uma ferramenta muito poderosa, pois vem com uma série de recursos para ajudar os desenvolvedores a criar aplicativos rapidamente. Hoje selecionei dez pontos que ajudarão muito os desenvolvedores. No entanto, existem muitos recursos que são igualmente valiosos. Compartilhe nos comentários o que você está usando.
Do tradutor:
Espero que tenha gostado deste artigo. Eu transmito este e muitos outros artigos úteis para desenvolvedores de front-end iniciantes no canal Frontend.school () Telegram , onde também preparo questionários úteis para testar meus conhecimentos.