{"id":560,"date":"2011-05-21T18:45:15","date_gmt":"2011-05-21T16:45:15","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=560"},"modified":"2011-05-21T18:45:15","modified_gmt":"2011-05-21T16:45:15","slug":"chrome-dev-tools-insidertipps","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/chrome-dev-tools-insidertipps\/","title":{"rendered":"Chrome Dev Tools: Insidertipps"},"content":{"rendered":"

Chromes Version von Firebug hat sich ordentlich gemausert. Inspiriert durch dieses Video<\/a> gibts hier nun also ein paar nicht so bekannte Features der Devtools.<\/p>\n

Konsole \u00fcberall einblenden<\/h2>\n

In jedem Panel der Devtools l\u00e4sst sich mittels Druck auf ESC<\/i> die Konsole hochfahren und so simultan arbeiten.<\/p>\n

\"Konsole<\/a>

Konsole hochfahren<\/p><\/div>\n

Weitere Shortcuts gibts hier<\/a>.<\/p>\n

Die Funktionen dir() und copy()<\/h2>\n

Bekanntlich l\u00e4sst sich durch Eingabe des DOM-Elements in die Konsole das HTML dazu selektiv anzeigen (siehe Bild oben: document.body<\/i>). Mittels der Funktion dir()<\/b> l\u00e4sst sich eine weit detailliertere Auflistung anzeigen, die u.a. auch Event Handler anzeigt:<\/p>\n

\"dir\"<\/a>

dir<\/p><\/div>\n

Mit copy()<\/b> l\u00e4sst sich Text in die Zwischenablage kopieren. <\/p>\n

copy(document.body.innerText)<\/pre>\n
Danach befindet sich der gesamte lesbare Text der Webseite in der Zwischenablage.<\/p>\n
Ach, bevor ichs vergesse: $0<\/i> ist eine Referenz auf das aktuell markierte Element:<\/p>\n
\"$0\"<\/a>
$0<\/p><\/div>\n
Farbmodell wechseln<\/h2>\n
Per Klick auf den farbigen Kasten l\u00e4sst sich das Farbmodell togglen. Zur Verf\u00fcgung steht die Hex-Anzeige von RGB, RGB in ausgeschriebener Form und das sehr intuitive HSL<\/a>.
\n
\"HEX\"<\/a>
HEX<\/p><\/div><\/p>\n
\"RGB\"<\/a>
RGB<\/p><\/div>\n
\"HSL\"<\/a>
HSL<\/p><\/div>\n
Dateirevisionen<\/h2>\n
Wenn man im „Element untersuchen“ Modus CSS-\u00c4nderungen vornimmt und anschlie\u00dfend auf die CSS-Datei klickt (markiert), hat man nun die M\u00f6glichkeit, alte Revisionen anzusehen und diese wiederherzustellen. <\/p>\n
\"File<\/a>
File Revision 1<\/p><\/div>
\n
\"File<\/a>
File Revision 2<\/p><\/div><\/p>\n
In den Chrome canary builds<\/a> (Entwicklungsversion) gibt es dann zus\u00e4tzlich noch die M\u00f6glichkeit, das CSS direkt aus dieser Ansicht heraus zu speichern.<\/p>\n
\"File<\/a>
File Revision 3<\/p><\/div>\n
Codeformatierung<\/h2>\n
Leider ebenfalls noch dem Canary-Build vorbehalten: Pretty Printing von Code. Minifiziertes Javascript l\u00e4sst sich so sch\u00f6n betrachten:<\/p>\n
\"Codeformat:<\/a>
Codeformat: Auf die Klammern klicken<\/p><\/div>\n
Anschlie\u00dfend sieht es dann so aus:<\/p>\n
\"Formatiert\"<\/a>
Formatiert<\/p><\/div>\n
Die Timeline<\/h2>\n
Kein wirklicher Geheimtipp, aber trotzdem von vielen vernachl\u00e4ssigt: Die superm\u00e4chtige Timeline-Ansicht. Hier verr\u00e4t euch Chrome, was so im Hintergrund alles abgeht. Reflows, Repaints, Requests… Alles wunderbar aufgelistet:
\n
\"Timeline\"<\/a>
Timeline<\/p><\/div><\/p>\n
Remote Debugging<\/h2>\n
Das meiner Meinung nach geilste Feature im Canary Build (was es hoffentlich so schnell wie m\u00f6glich in die offizielle Version schafft!): Remote Debugging. Dazu startet ihr Chrome einfach mit dem Parameter <\/p>\n
--remote-debugging-port=<portnummer><\/pre>\n
\"Remote<\/a>
Remote Debugging<\/p><\/div>\n
Dann Chrome starten und in einer neuen Instanz (muss nicht der canary-build sein) auf http:\/\/localhost:portnummer<\/b> connecten.<\/p>\n
Was wir sehen sind also erstmal die offenen Tabs der anderen Browser-Instanz.<\/p>\n
\"Remote<\/a>
Remote Debugging<\/p><\/div>\n
W\u00e4hlen wir jetzt ein Tab aus, bekommen wir die Konsole des anderen Browsers pr\u00e4sentiert und k\u00f6nnen uns austoben. Superpraktisch, wenn man bspw. f\u00fcr mobile Ger\u00e4te entwickelt.<\/p>\n
\"Remote<\/a>
Remote Console<\/p><\/div>\n
Mehr zum Remote-Debugging<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Chromes Version von Firebug hat sich ordentlich gemausert. Inspiriert durch dieses Video gibts hier nun also ein paar nicht so bekannte Features der Devtools. Konsole \u00fcberall einblenden In jedem Panel der Devtools l\u00e4sst sich mittels Druck auf ESC die Konsole … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,3],"tags":[],"class_list":["post-560","post","type-post","status-publish","format-standard","hentry","category-javascript","category-webdev"],"_links":{"self":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":0,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}