{"id":4864,"date":"2012-11-21T02:48:22","date_gmt":"2012-11-21T07:48:22","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=4864"},"modified":"2024-02-04T20:37:57","modified_gmt":"2024-02-05T01:37:57","slug":"quick-tip-web-inspector-shortcut-keys","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2012\/11\/21\/quick-tip-web-inspector-shortcut-keys\/","title":{"rendered":"Quick Tip: Chrome Developer Tools Shortcut Keys"},"content":{"rendered":"<p>Sometimes it is the more subtle, less obvious features provided by tools which prove to be surprisingly useful. Interestingly, while such features can save developers considerable time and effort, they are often much less apparent, and thus, occasionally overlooked when compared to their main counterparts.<\/p>\n<p>A noteworthy example of some very simple, yet extremely useful features can be found in just a few of the basic <a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/\" title=\"Chrome Developer Tools\" target=\"_blank\" rel=\"noopener\">Chrome Developer Tools<\/a> shortcut keys. Below is a brief description of the most convenient shortcuts I find myself using regularly.<\/p>\n<h2>Go to Source (Cmd-O)<\/h2>\n<p>Perhaps the most useful short-cut available in the sources panel, Cmd-O allows one to quickly search for a specific source file (thanks to <a href=\"https:\/\/twitter.com\/augiemarcello\" title=\"augiemarcello\" target=\"_blank\" rel=\"noopener\">@augiemarcello<\/a> for this one):<br \/>\n<img decoding=\"async\" src=\"\/img\/articles\/webinspector-cmd-o.png\" alt=\"Chrome Developer Tools Command-O\" \/><\/p>\n<h2>Show Functions (Cmd-shift-O)<\/h2>\n<p>Another extremely useful feature in the Sources Panel, Cmd-shift-O displays a list of all functions and their corresponding line numbers within the current source file:<br \/>\n<img decoding=\"async\" src=\"\/img\/articles\/webinspector-shift-cmd-o.png\" alt=\"Chrome Developer Tools Command-Shift-O\" \/><\/p>\n<h2>Clear Console (Cmd-K\/)<\/h2>\n<p>Clears the console when in focus:<br \/>\n<img decoding=\"async\" src=\"\/img\/articles\/webinspector-cmd-k.png\" alt=\"Chrome Developer Tools Command-k\" \/><\/p>\n<h2>Previous\/Next Panel (Cmd-[ \/ Cmd-])<\/h2>\n<p>Toggles between Developer Tools Panels (e.g. Elements, Resources, Network, Sources etc.):<br \/>\n<img decoding=\"async\" src=\"\/img\/articles\/webinspector-cmd-[].png\" alt=\"Chrome Developer Tools Command-[]\" \/><\/p>\n<p>There are quite a few additional <a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/docs\/shortcuts\" target=\"_blank\" rel=\"noopener\">shortcut keys <\/a> available in Chrome Developer Tools, and <a href=\"http:\/\/anti-code.com\/blog\/\" target=\"_blank\" rel=\"noopener\">Jared<\/a> has done a excellent job of providing a <a href=\"http:\/\/anti-code.com\/devtools-cheatsheet\/\" target=\"_blank\" rel=\"noopener\">Devtools cheat sheet<\/a>. I highly recommend trying some of them out; committing to memory those which you find most useful &#8211; and sharing them with others as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes it is the more subtle, less obvious features provided by tools which prove to be surprisingly useful. Interestingly, while such features can save developers considerable time and effort, they are often much less apparent, and thus, occasionally overlooked when compared to their main counterparts. A noteworthy example of some very simple, yet extremely useful features can be found in&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2012\/11\/21\/quick-tip-web-inspector-shortcut-keys\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[133,78,201],"tags":[166,144,68,207,206],"class_list":["post-4864","post","type-post","status-publish","format-standard","hentry","category-browsers","category-javascript-2","category-quick-tips","tag-browsers-2","tag-chrome","tag-javascript","tag-safari","tag-web-inspector"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/4864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=4864"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/4864\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=4864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=4864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=4864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}