Wenn Sie ein Webentwickler sind, sind Sie sicher bereits mit den Chrome-Entwicklertools vertraut. Sie haben eine große Liste von Funktionen, die einem Webentwickler helfen sollen. Aber viele nutzen das Nötigste, um die anstehende Aufgabe zu erledigen.
In diesem Artikel stelle ich zehn Tipps für die Arbeit mit Chrome-Entwicklertools vor, mit denen Sie Ihre Produktivität auf die nächste Stufe heben können.
1. Befehlsmenü
, (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 ist ein ziemlich leistungsfähiges Tool, da es eine Reihe von Funktionen enthält, mit denen Entwickler Apps schnell erstellen können. Heute habe ich zehn Punkte ausgewählt, die Entwicklern sehr helfen werden. Es gibt jedoch viele Funktionen, die genauso wertvoll sind. Teilen Sie in den Kommentaren mit, was Sie verwenden.
Vom Übersetzer:
Ich hoffe, Ihnen hat dieser Artikel gefallen. Ich habe diesen und viele andere nützliche Artikel für Frontend-Entwickler auf dem Frontend.school () -Telegrammkanal gesendet , wo ich auch nützliche Tests vorbereite, um mein Wissen zu testen.