{"id":18761,"date":"2013-12-03T13:01:03","date_gmt":"2013-12-03T05:01:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18761"},"modified":"2025-04-04T01:39:00","modified_gmt":"2025-04-03T17:39:00","slug":"chrome-web-developers-tips","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/","title":{"rendered":"5 (More) Useful Chrome DevTools Tips for Developers"},"content":{"rendered":"

Google Chrome comes with a handy set of web development tools in the form of DevTools<\/strong> (The Chrome Developer Tools). In a previous post<\/a>, we showed you a few basic tips on using DevTools like changing the User Agent string<\/a>, CSS Editing, Changing color format, and moving the DOM<\/a>.<\/p>\n

As Google continuously adds new features to DevTools, we have decided to showcase 5 more features in DevTools that could help you develop your website more efficiently.<\/p>\n

Recommended Reading:<\/strong> Useful Google Chrome Extensions For Web Designers<\/a><\/p>\n

1. Tidy-up JavaScript<\/h2>\n

Minifying JavaScript is a good way to reduce file size and improve a website\u2019s load time<\/strong>. However, a minified code is very difficult to read and debug. If you have this problem, you can use the PrettyPrint<\/strong> feature in DevTools to \"un-minify\" the JavaScript.<\/p>\n

Go to the Sources<\/strong> panel in DevTools, and you will find an array of icons at the bottom left (screenshot).<\/p>\n

\"icons\"<\/figure>\n

Select the minified JavaScript source, and then click on the curly bracket icon<\/strong>, {}<\/strong> from the array of icons (screenshot).<\/p>\n

\"unminified\"<\/figure>\n

And as you can see from the screenshot above, the JavaScript is now tidier and more readable.<\/p>\n

2. Snippets<\/h2>\n

By taking advantage of frequently used codes, Code Snippets can save you a lot of time and significantly speed up the debugging process.<\/strong><\/p>\n

First, go to Sources<\/strong> > Snippets<\/strong> (subpanel). Then, right-click and select New<\/strong> to create a new snippet, type in a code that you frequently use and save it.<\/p>\n

\"new<\/figure>\n

To insert a snippet, just open one of your source codes \u2013 it could be HTML, CSS or JS. Then, drag and drop the snippet into the source code (screenshot).<\/p>\n

\"drag<\/figure>\n

3. Override Geolocation<\/h2>\n

In a previous tutorial, we showed you how to retrieve user location using HTML5 Geolocation<\/a>. When developing a website or an application where you incorporate HTML5 Geolocation, you might want to display a location other than your own. With DevTools, you can do that quite easily.<\/p>\n

First, you need to find out the longitude and latitude coordinates of the desired location with this tool<\/a><\/strong>.<\/p>\n

    \n
  1. Then, go to Settings<\/strong> > Override<\/strong>.<\/li>\n
  2. Check \/ Tick the Override Geolocation<\/strong> option.<\/li>\n
  3. Enter the longitude and latitude coordinates.<\/li>\n<\/ol>\n
    \"geolocation\"<\/figure>\n

    Now, refresh the page and you should see the location based on the coordinates you have entered (screenshots).<\/p>\n

    \"maps\"<\/figure>\n

    4. Performance Audit<\/h2>\n

    Your visitors or customers will likely leave your website if it loads terribly slowly. To measure your website\u2019s performance<\/a> using Google Chrome, you can go to the Audits<\/strong> panel in DevTools, and hit the Run<\/strong> button (screenshot).<\/p>\n

    \"audit\"<\/figure>\n

    It will generate a report showing you which part(s) of your website should be optimized (screenshot).<\/p>\n

    \"report\"<\/figure>\n

    5. Copy the Text Document<\/h2>\n

    With DevTools, you can also copy content from a web page. This could be useful when you need some real content to test your website instead of the conventional Lorem Ipsum<\/em>. To do that, just go to the Console<\/strong> panel and run the following command.<\/p>\n

    \r\ncopy(document.getElementById('content').innerText)\r\n<\/pre>\n
    The command assumes that the content is nested under the element with the ID of content<\/code>. Depending on the web page, the ID may vary. So, before running this command, copy()<\/code>, you need to figure out where the content (that you intend to copy) is being nested.<\/p>\n
    After running this command, the content will be immediately saved to the clipboard, so you can simply paste it into your document.<\/p>\n
    \"copy<\/figure>\n
    As always, we hope that you found these tips useful. If you have any other good tips what we have missed out in this post, please feel free to let us know in the comments below.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
    Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a few basic tips on using DevTools like changing the User Agent string, CSS Editing, Changing color format, and moving the DOM. As Google continuously adds new features…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[1258,2856,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n5 Useful Chrome DevTools Tips for Developers<\/title>\n<meta name=\"description\" content=\"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 (More) Useful Chrome DevTools Tips for Developers\" \/>\n<meta property=\"og:description\" content=\"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-12-03T05:01:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:39:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"5 (More) Useful Chrome DevTools Tips for Developers\",\"datePublished\":\"2013-12-03T05:01:03+00:00\",\"dateModified\":\"2025-04-03T17:39:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/\"},\"wordCount\":587,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-web-developers-tips\\\/icons.jpg\",\"keywords\":[\"Chrome\",\"Dev Tools\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/\",\"name\":\"5 Useful Chrome DevTools Tips for Developers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-web-developers-tips\\\/icons.jpg\",\"datePublished\":\"2013-12-03T05:01:03+00:00\",\"dateModified\":\"2025-04-03T17:39:00+00:00\",\"description\":\"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-web-developers-tips\\\/icons.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/chrome-web-developers-tips\\\/icons.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/chrome-web-developers-tips\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 (More) Useful Chrome DevTools Tips for Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Useful Chrome DevTools Tips for Developers","description":"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/","og_locale":"en_US","og_type":"article","og_title":"5 (More) Useful Chrome DevTools Tips for Developers","og_description":"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a","og_url":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-12-03T05:01:03+00:00","article_modified_time":"2025-04-03T17:39:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"5 (More) Useful Chrome DevTools Tips for Developers","datePublished":"2013-12-03T05:01:03+00:00","dateModified":"2025-04-03T17:39:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/"},"wordCount":587,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg","keywords":["Chrome","Dev Tools","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/","url":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/","name":"5 Useful Chrome DevTools Tips for Developers","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg","datePublished":"2013-12-03T05:01:03+00:00","dateModified":"2025-04-03T17:39:00+00:00","description":"Google Chrome comes with a handy set of web development tools in the form of DevTools (The Chrome Developer Tools). In a previous post, we showed you a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/chrome-web-developers-tips\/icons.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/chrome-web-developers-tips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 (More) Useful Chrome DevTools Tips for Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4SB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18761"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18761\/revisions"}],"predecessor-version":[{"id":73639,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18761\/revisions\/73639"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18761"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}