あなたがウェブ開発者なら、あなたはすでにChrome開発者ツールに精通していると確信しています。Web開発者を支援する機能の大規模なリストがあります。しかし、多くの人は、目前のタスクを完了するためだけに、最低限を使用します。
この記事では、生産性を次のレベルに引き上げるのに役立つChrome開発者ツールを使用するための10のヒントを紹介します。
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は、開発者がアプリをすばやく作成するのに役立つ多くの機能を備えているため、非常に強力なツールです。今日は、開発者に大いに役立つ10のポイントを選択しました。ただし、同じように価値のある多くの機能があります。使用しているものをコメントで共有してください。
翻訳者から：
この記事を楽しんでいただけたでしょうか。私はこれと他の多くの有用な記事をFrontend.school（） Telegramチャネルで初心者のフロントエンド開発者に放送します 。そこでは、知識をテストするための有用なクイズも用意しています。