10 Chrome-Entwicklungstools und Tipps, die Sie kennen müssen

1. Simulieren Sie langsame Netzwerke und langsame Geräte.

Wir sind möglicherweise an die Internetgeschwindigkeit in Städten gewöhnt, was nicht bedeutet, dass die Internetgeschwindigkeit überall in China gleich ist. Die Internetgeschwindigkeit ist immer noch erbärmlich langsam, daher müssen die von uns hergestellten Produkte manchmal langsame Netzwerkgeschwindigkeiten berücksichtigen.

Öffnen Sie die Registerkarte Leistung des Google-Browsers und klicken Sie dann auf das Zahnradsymbol in der oberen rechten Ecke, um die Simulation von Newwork und CPU anzuzeigen Zustand. performance选项卡，然后单击右上角的齿轮图标就可以看到 Newwork 和CPU的模拟情况。

2. 颜色选择器

单击表示颜色的小方块，弹出颜色选择器。

启用颜色选择器后，可以将网页悬停并使用颜色选择器来获取该像素的颜色。

弹出颜色选择器的小方块还有快捷键按住Shift并单击以更改颜色格式。

3. Audits

Audits（审计）,这个功能其实一直存在，只不过在chrome 60之后，发生了翻天覆地的变化：引入了Google开源的另外一个项目：LightHouse。

Audits主要从5个方面来给网页打分，最终会生成一个report:

4.Pretty Print（显示可读代码）

我们知道许多网站都对Javascript代码进行了压缩，但这对开发者和学习者来说，读起来很费劲，谷歌提供一个功能给我们，可以更好查看压缩文件。

我们点击下方的大括号｛｝图标，即可使用Pretty Print功能了

5.快速文件切换器

如果你知道文件名，则不必打开“Sources”选项卡。只需按cmd/ctrl + p

2 . Farbauswahl

Klicken Sie auf das kleine Quadrat, das die Farbe darstellt, um die Farbauswahl aufzurufen.

Farbauswahl aktivieren Danach Dann können Sie den Mauszeiger über die Seite bewegen und den Farbwähler verwenden, um die Farbe dieses Pixels zu ermitteln.

Popup-Farbe Picker Die kleinen Quadrate verfügen auch über Tastenkombinationen, mit denen Sie die Umschalttaste gedrückt halten und klicken können, um das Farbformat zu ändern.

3. Audits

Audits (Audits), diese Funktion gab es schon immer, aber nach Chrome 60 kam es zu bahnbrechenden Änderungen: ein weiteres Google Open-Source-Projekt wurde eingeführt: LightHouse Code>. <p></p> <p>Audits</p>Bewerten Sie Webseiten hauptsächlich anhand von 5 Aspekten und erstellen Sie schließlich einen Bericht:<p></p>4.Pretty Print (lesbarer Code anzeigen)<p></p> <img src="https://img.php.cn/%20upload/image%20/227/471/930/16040510908331610%20Chrome-Entwicklungstools%20und%20Tipps,%20die%20Sie%20kennen%20m%C3%BCssen" title="16040510908331610 Chrome-Entwicklungstools und Tipps, die Sie kennen müssen" alt="10 Chrome-Entwicklungstools und Tipps, die Sie kennen müssen"><ol> <li>Wir wissen, dass viele Websites Javascript-Code komprimieren, aber das ist ein Problem für Entwickler und für Lernende ist sehr schwer zu lesen. Google stellt uns eine Funktion zur besseren Anzeige komprimierter Dateien zur Verfügung. </li> <li>Wir klicken auf das Klammersymbol <code>｛｝ unten, um die Pretty Print-Funktion zu verwenden

5. Schneller Dateiwechsel

Wenn Sie den Dateinamen kennen, müssen Sie „Quellen“ nicht öffnen Registerkarte „Code >“ Drücken Sie einfach <code>cmd/ctrl + p, geben Sie dann den Dateinamen ein, den Sie suchen möchten, drücken Sie dann die Eingabetaste und alles ist in Ordnung.

6. Responsiver Modus

Wir entwickeln Websites sowohl auf Desktop- als auch auf Mobilgeräten und bevorzugen im Allgemeinen die anfängliche Desktop-Erfahrung. Dies ist jedoch unabhängig vom Trend, dass immer mehr Benutzer mobile Geräte für den Zugriff auf das Internet nutzen. Um das Benutzererlebnis der Website zu verbessern, müssen wir genau wissen, wie die Website auf mobilen Geräten funktioniert.

Chrome

Eine mobile Emulatorfunktion wurde zum Entwickler-Toolkit hinzugefügt, um uns beim Testen zu helfen:

Für die meisten Menschen müssen sie ihre Website die meiste Zeit nur auf verschiedenen Bildschirmgrößen und -ausrichtungen anzeigen.

🎜🎜🎜Ich arbeite mit Alibaba Cloud auf dem Server zusammen und der Rabattpreis ist relativ günstig: 89/Jahr, 223/3 Jahre, günstiger als 9,9 pro Monat für Studenten. Ich habe es gekauft, um ein Projekt zu erstellen, und das ist es auch Es ist bequemer, mit dem Technologie-Stack vertraut zu sein (alte Benutzer verwenden Familienmitglieder. Kaufen Sie es einfach mit einem Konto. Ich verwende die Empfehlung meiner Mutter, es für drei Jahre zu kaufen. Sie können es überprüfen, indem Sie auf diesen Artikel klicken. 🎜🎜Icomo🎜🎜7. Screenshot🎜🎜1, F12🎜🎜2, [Strg+Umschalt+P]🎜🎜3. Wählen Sie eine der folgenden Optionen aus: „Screenshot in voller Größe aufnehmen“ gesamte Webseite]🎜🎜Knoten-Screenshot erfassen"【Knoten-Webseite】🎜🎜"Screenshot erfassen"【Aktueller Bildschirm】🎜🎜🎜8. Erweiterungen🎜🎜Wir können Erweiterungen für die Chrome-Entwicklerkonsole installieren. Viele Frameworks verfügen über eigene Erweiterungen, um die Entwicklung ihrer Technologien zu vereinfachen (Vue, Angular, React usw.). Dies ist eine Liste der empfohlenen DevTools-Erweiterungen. 🎜🎜9. Coverage🎜🎜Coverage ist eine neue Funktion der Chrome-Entwicklertools. Sie kann buchstäblich verwendet werden, um zu erkennen, welche JS und CSS bereits ausgeführt werden, wenn der Code auf der Website ausgeführt wird, und welche JS und CSS noch nicht Bisher verwendet. Wie im Bild gezeigt, ist dies der laufende und nicht laufende Code, der angezeigt wird, wenn ich die csdn-Webseite öffne. 🎜🎜🎜🎜🎜So öffnen Sie caver. Voraussetzung: Die Version des Chrome-Browsers muss 59 oder höher sein. Öffnen Sie schnell Devtools mit Strg+Umschalt+i und klicken Sie auf „Weitere Tools“ in der oberen rechten Ecke. 🎜🎜Was bewirkt diese neue Funktion? 🎜

Wie im Bild oben gezeigt, zeigt ganz rechts die Anzahl der von uns geladenen CSS- und JS-Dateien. Der rote Bereich zeigt den Code an, der ausgeführt wurde, während der Cyan den Code anzeigt, der geladen, aber nicht ausgeführt wurde. Es kann verwendet werden, um JS- und CSS-Codes zu erkennen, die nicht auf der Seite verwendet wurden. Sie können Benutzern nur den erforderlichen Code zur Verfügung stellen und so die Leistung der Seite verbessern. Dies ist nützlich, um Skripte zu identifizieren, die aufgeteilt werden können, und um unkritische Skripte langsam zu laden.

10. Verfolgen Sie neue Funktionen in Echtzeit

Die Entwicklungstools von Chrome werden ständig aktualisiert und es werden aktualisierte Videos zu „Neuigkeiten in DevTools“ veröffentlicht. Wir können uns von Zeit zu Zeit über einige neue Funktionen informieren. Damit wir Sie jetzt in Echtzeit über einige nützliche Funktionen von Google informieren können.

Originaladresse: https://medium.com/better-programming/10-must-know-chrome-developer-tools-and-tricks-d03f75d10cc9

Autor: FelDev

Für weitere programmierbezogene Kenntnisse Besuchen Sie bitte: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt von10 Chrome-Entwicklungstools und Tipps, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!