Let's begin with Chrome

Chrome is a web browser developed by Google. In 2008, it is initially released for Microsoft Windows, then to Linux, Mac OS, iOS and Android. Chrome browser is also the main component of Chrome OS as it can be used as web application platform.

It used to be a world of IE, Safari and Firefox. Ever since the release of Chrome, Internet users are starting to migrate to Chrome browser for basic web surfing. Now, it has been more than half of the Internet users use Chrome as their default browser.

For most of the people, Chrome is just a browser. But as for developers, it is a very powerful tool to debug their written code. Most of the browsers nowadays have built-in developers tools allowing the developers to do debugging and testing easily. Today, we are going to learn Chrome DevTools.

DevTools Introduction

The easiest way to open Chrome DevTools is by right clicking the webpage and select Inspect, or you can go the menu and select Settings > More Tools > Developer Tools, or press Ctrl + Shift + I all at once, whichever way is fine.

There are 8 panels available on the top bar, which are:

  • Elements - analyze and manipulate DOM and CSS on the webpage
  • Console - run Javascript code in real time
  • Sources - debug Javascript such as setting breakpoints
  • Network - monitor the network requests and downloaded source files
  • Performance - a more in-depth analysis on network events in period of time
  • Memory - a even more sophisticated tool to analyze data information in memory level
  • Application - check for additional loaded resources, such as IndexDB, Web SQL, cookie, cache, iamges, fonts and etc.
  • Security - debug mixed content issues, certificate issues and etc.

Quick and useful tips

  1. Use copy(...) to copy value from the console. For example, copy(location) will copy the result from typing location in console. copy($_) to copy the previous returned values whereas copy($0) will copy the selected HTML element.
  2. Right click on the object and select Store as global and Chrome will automatically create a new variable to hold the object temp1, temp2 and so on.
  3. Right click to Save as allows to save the selected context into a file.
  4. Copy HTML code right away by right clicking the element node and select Copy > Copy Element will do.
  5. Ctrl + Shift + D to quickly dock the dev tools to bottom or otherwise (right, left or separate windows).
  6. Ctrl + [ to tab to the left and Ctrl + ] to tab to the right.
  7. Ctrl + F to search for anything basically. NOTE: though each panel supports the search, the search condition are not be the same for all.
  8. Ctrl + Shift + P to use Command in DevTools. Well, it is just a shortcut to tabs, settings and other cool stuff. For example, Capture full size screenshot will be very useful to capture the long webpage into png file.
  9. In Source tab, you can create your own Snippet where you can run your predefined javascript code instantly. You can either right click on snippet and select run, or press Ctrl + P and type ! along with the snippet name in the command bar.
  10. Useful symbol in console:
    • $0 - select the current html node. You can even do some actions on it, ex: $1.appendChild($0)
    • $1 ... $4 - select the previous html node $1, the one before previous node $2, the one before previous of previous $3, and the one before previous of previous of previous $4 ($4 is the last html node that we can retrieve)
    • $ - the nickname for document.querySelector
    • $$ - the nickname for document.querySelectorAll and return the node of data group, not Node list
    • $_ - get the previous execution result
  11. console.log(a, b, c, d) will print the value separated by space accordingly. If type console.log({a, b, c, d}) it will print in object literal, ex: {a:1, b:2...}
  12. console.table can print out a list or list-alike or an object. Not only does it support scaling, it also supports sorting as well. For example: console.table($$('li')), console.table({a, b, c, d})
  13. If you want to print a DOM node, you can use console.log() to print out the HTML to console. If you use console.dir(), you are able to view it like an object with attributes.
  14. If you want to print logs with timestamp, simply go to Settings (press F1 or click the 3 dots and select Settings in navigation bar) and check show timestamps.
  15. console.time() to start a timer and console.timeEnd() to stop the timer and it will print the time duration. You can identify which timer by giving the parameter a name, such as console.time('hello') and console.timeEnd('hello').
  16. You can write javascript code that get executed repeatedly by going to Console tab and click on the eye button to create live expression. From the textbox, just write whatever javascript code that you want to execute repeatedly.
  17. In the Network tab, you can filter the requests by typing the following:
    • method:POST
    • domain:xxx.com
    • status-code:200
    • and etc.
  18. You can right click the table header in the Network tab to select more or less column to be displayed on the screen.
  19. Right click on the network request to resend XHR by right clicking the request row and select Replay XHR. No need to do a manual page refresh.
  20. If you want to find out what CSS you have been modified since the beginning, you can click the 3 dots in the Console Drawer and select Changes.

Well, this might not be enough to explore the fabulous DevTools of Chrome. For more information about Chrome DevTools, you can visit developers.google.com to search for the content based on your preferences. Adios, my friend!

Post was published on , last updated on .

Like the content? Support the author by paypal.me!