Tech blog to share information.

April 19, 2018

Google Chrome : Developer Console Time Saving Tips

April 19, 2018 Posted by tjcool , , , , No comments

As a web developer, designer we rely a lot on browsers tools. Some tools are inbuilt and some we install as an add-on. But on top of that, using the tool correctly or I will say using the tool more productively is very important. This saves our lot of time. On the same front, there is one tool that we all uses a lot is “Browser Developer Console”. And Today we will check some of the time-saving features of “Google Chrome Developer Console”.
Below are some handful and time-saving tips and tricks for developer console. Take a look. Smile
  • Quick file switching: Open Developer(F12) and  Press Ctrl + P. Search box will pop up, now to quickly search for, and open any file in your project type the name of the file. The file will be filtered and shown as below.
File Switch
  • Search within source code: Searching method, snippet, string in loaded javascript is important. So to search in all files loaded on the page for a specific string, hit Ctrl + Shift + F. Type the string you want to search for and Hit Enter. You will get a list of all occurrences of the string. This method of searching also supports Regular expressions as well.

  •  Jump to Line: Say you have opened any file via File switching and now you want to jump on a particular line(if you know line number). Then instead of scrolling scrollbar just hit  Ctrl + G

  • Compare Similar Data Objects: The method table() provides an easy way to view objects and arrays that include similar data. When called, it will take the properties of an object and create a header. The row data then comes from each index's properties value.
    console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
    console.table([[1,2,3], [2,3,4]]);
console table display
  • Use multiple carets & selections: OK. Now you have opened while editing a file you can set multiple carets by holding Ctrl and clicking where you want them to be, thus allowing you to write in many places at once.

  • Measure execution times: The time() method starts a new timer and is very useful to measure how long something took. Pass a string to the method to give the marker a name. When you want to stop the timer, call timeEnd() and pass it the same string passed to the initializer. The console then logs the label and time elapsed when the timeEnd() method fires.
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
console.timeEnd("Array initialize");

          • Select next occurrence: When we modify any method and if it is big, finding occurrences or changing it is one tedious job. So if you want to perform similar actions, then you press Ctrl + D  while editing files in the Sources Tab, the next occurrence of the current word will be selected. You can also as edit them simultaneously.

          • Run Snippets Of Code From Any Page: If you have small utilities or debugging scripts which you find yourself using repeatedly on multiple pages, consider saving the scripts as snippets. 
            • Step 1 - Create Snippet: To create a snippet, open the Sources panel, click on the Snippets tab, right-click within the Navigator, and then select New.

            • Step 2 - Save Changes: Enter your code in the editor and save changes 
            • Step 3 - Run Script: Right-click on the snippet filename (in the pane on the left that lists all your snippets) and select Run.

          There are other tips as well. I will try to cover up in other posts. Thank you

          1. I am not the original creator of gif images.
          2. Google Chrome Dev Tools