in

Chrome Developer Tools Shortcut lets developers use Chrome Effectively

We have the best Chrome Developer Tools Shortcut for new web developers to get started and get fast at making fast and powerful websites in no time!

Chrome Developer Tools Shortcut

Google Chrome developer tools shortcuts:

Google Chrome Developer tools shortcut: This is an article on Google Chrome Developer tools shortcut to introduce the most useful keyboard shortcuts.  All web developer should be familiar with these Google Chrome Developer tools keyboard shortcuts in order to be an efficient  Web Developer.

This post is divided into two parts.  The first part is the introduction and the second part is where we show the keyboard shortcuts against the usage of it.

Quick Links:

Learn more about Chrome Developer Tools Shortcuts here

Google Chrome Developer tools an Introduction:

Google Chrome tools are very powerful and there are many advanced processes that we can do while debugging.  Let us get started.

We can open the developer tools in a few different ways, one way is to open the developer tools from the menu, more tools and developer tools.  Or we can just use f12  or ctrl+shift+i.

When we click on the menu options in the developer tools, we can see more options but we are not going to look into them for this post.

Let us look at some of the tabs that are available on the Google Chrome Developer Tools:

Elements tab:

Let us look at the Elements tab.  Here we can see that we can dock the developer tools tab using the icons provided at the top right of the developer tools.   And we can also simultaneously develop different screen resolutions using the icon given in the image below.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

When we are inside the elements tab of developer tools, we can see that it is mainly divided into two sections.  The first section is the source code of the page or the HTML and the second section is the CSS of the item that is currently selected in the HTML.  We can see that as we hover over the code of that element in the source code using the mouse, we highlight the content of the website.  We can also do the reverse by pressing Ctrl+shift+c  and hover over the content on the website and highlight the code for the particular element.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

While an element is selected, we can see the CSS related to the element in the second main section of the elements tab in the chrome developer tools.  Using the CSS section, we can see the style that is related to the element and also the line number that the style is defined at.  Clearly, we can also see the file name where the CSS is defined.  When we click on this, we see the file open in the source tab.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

We can use the checkbox provided against the style to apply it or remove and see the output in real time.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

The developer can double click on the source of the website in the first section of the elements tab and change the source of the element.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

Chrome developer tools also let us cut and paste the source snippets around the source files and this action can still be achieved by dragging a source snippet around the source code as well.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

We can right click, expand and collapse all.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

In the second section of the elements tab, we are able to type the class name provided in the field and see that Chrome Developer tools bring up the class from the class files.

The second section of the elements tab has a subtab named Event Listners.  It can be used to see the individual properties of the elements.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

Now let us see the second tab in the developer’s tool named Console.  We can open the console drawer from anywhere in the Chrome Developer tools.  We can do that by pressing the escape button.

Google Chrome Developer tools shortcut
Google Chrome Developer tools shortcut

Here we can enter JavaScript and see the output.  After entering anything in the prompt, we can see that there is an Undefined text.  This Undefined text means that there is no return value.

We can see that by entering a mathematical equation. Such as 99+1 will give 100 back.

We can also enter the $_ to see what is the last returned output value.

We can also enter $0 (Zero) to get the last selected element in the inspect element into the console tab.  Here we can see that the number after the dollar sign is the index of the selected element in the reverse order.  So if we enter $1 we will see the second last element that was selected using the Chrome Inspect Element.

We can use $ followed by parenthesis as a query selector just as Jquery does.

The following are useful JavaScript log methods that can be used for logging in the Chrome Console.

console.log()

console.error()

console.warn()

console.dir()

console.table()

console.clear()

console.group()

console.groupEnd()

console.time()

console.timeEnd()

console.assert()

Using the downward pointing arrow given in the image, we can choose what to show in the console window.  It is the info, warning, error that we can choose to show in the console window at the moment.

Click on the settings button and see the additional options that we can see

Hide Network

Preserve Log

Selected Context only

User Messages only

LogXMLHttpRequests

Show timestamps

Autocomplete from History

Sources Tab:

In this tab, the developers can make snippets and see the outputs in the Console tab.

Chrome Developer tools shortcut
Chrome Developer tools shortcut

The developers still can not edit the files in this tab as it is not added to the workspace.  To add the files in the workspace, please click inside this section and select add folders to a workspace.  After clicking on the add workspace, navigate to the folder in local and add it to the work space.

Now if we edit the contents of the file, we can see that the changes reflect into the browser as we save it.

Network Tab:

This tab lets us see the files that are being loaded and a waterfall style graph.  The filter is a very useful feature of the Network tab.  Here we can see that we can filter among:

XHR – that are all the Ajax requests

Docs – are the documents

WS – is the web socket that the browser is connecting to.

Now upon clicking on individual files shown in the network tab, we can see that, this also shows the

Header – Request and the Response header of the respective file.

Preview – Preview for the file in question.

Response – Response for the respective request.

Cookies – Cookies associated with the request and file.

Timing – The timings to make the request and get the response and all the necessary details.

Application Tab:

In the following we are going to see the given options:

Manifest

Service Workers

Clear Storage

Local Storage

Session Storage

IndexedDB

Web SQL

Cookies

Cache Storage

Application Cache

The difference between the session storage and local storage is that the session storage is cleared when the browser is closed and the local storage stays untill is cleared manually.

Audit Tab:

This is one of the most asked tabs in Chrome Developer tools.  This tab gives the rating for the website. It also gives suggestions for improving the web site and more.

The opportunities tab allows us to learn more about the things that we can do to improve the web site.

Here we can also see everything that we can do to improve the website and also the explanation for what each section means is also given there.

Chrome Developer tools Shortcut:

So far we have seen all the necessary things about Chrome Development tools and we will see some of the important Chrome Developer tools Shortcut in detail.

Launch Developer toolsF12Ctrl + Shift + I
 Switch from inspect element mode and browser windowCtrl + Shift + C
Open Developer Tools and bring focus to the consoleCtrl + Shift + J
Show General Settings dialogue?F1
Next panelCtrl + ]
Previous panelCtrl + [
Restore default text sizeCtrl + 0
Zoom inCtrl + +
Zoom outCtrl + 
Backward in panel HistoryCtrl + Alt + [
Forward in panel historyCtrl + Alt + ]
Jump to panel 1-9Ctrl + 1-9
Text search within the current fileCtrl + F
Text search across all sourcesCtrl + Shift + F
Search by filenameCtrl + O
Toggle ConsoleEsc
Refresh the pageF5Ctrl + R
Refresh the page ignoring cached contentCtrl + F5Ctrl + Shift + R

 

Edit ruleSingle-click
Insert new propertySingle-click on whitespace
Go to the line of style rule property declaration in the sourceCtrl + Click on property
Increment / decrement value by 10PgUpPgDown
Increment / decrement value by 100Shift + PgUpShift + PgDown
Increment / decrement value by 0.1Alt + UpAlt + Down
Go to the line of style rule property declaration in the sourceCtrl + Click on property
Go to the line of property value declaration in the sourceCtrl + Click on property value
Cycle through the colour definition valueShift + Click on colour picker box
Edit next / previous propertyTabShift + Tab
Increment / decrement valueUpDown
Go to line of property value declaration in sourceCtrl + Click on property value
Go to line of style rule property declaration in sourceCtrl + Click on property
Go to line of property value declaration in sourceCtrl + Click on property value
Expand nodeSingle-click on tag
Edit attributeEnterDouble-click on attribute
Hide elementH
Toggle edit as HTMLF2
Undo changeCtrl + Z
Redo changeCtrl + Y
NavigateUpDown
Expand / collapse nodeRightLeft

 

Pause / resume script executionF8Ctrl + \
Step over next function callF10Ctrl + 
Step into next function callF11Ctrl + ;
Step out of current functionShift + F11Ctrl + Shift + ;
Select next call frameCtrl + .
Jump to columnCtrl + O + :<number> + :<number>
Go to memberCtrl + Shift + O
Toggle console and evaluate code selected in Sources panelCtrl + Shift + E
Run snippetCtrl + Enter
Toggle commentCtrl + /
Comment a line or selected textCtrl + /
Save changes to local modificationsCtrl + S
Go to lineCtrl + G
Search by filenameCtrl + O
Jump to line numberCtrl + P + :<number>
Toggle breakpoint conditionClick on line numberCtrl + B
Edit breakpoint conditionRight-click on line number
Delete individual wordsAlt + Delete

 

Load timeline dataCtrl + O
Start / stop recordingCtrl + E
Save timeline dataCtrl + S

 

Next command/lineDown
Clear ConsoleCtrl + L
Multi-line entryShift + Enter
ExecuteEnter
Next suggestionTab
Previous suggestionShift + Tab
Accept suggestionRight
Previous command/lineUp
Filter/navigate to a JavaScript function/CSS rule when viewing a fileCtrl + Shift + O
Launch line number dialog when viewing a fileCtrl + K
Evaluate code selected in scripts in the consoleCtrl + Shift + E
Search scripts, stylesheets and snippets by filenameCtrl + O
Text search within current fileCtrl + F
Text search across all sourcesCtrl + Shift + F

Conclusion:

Here we have given a comprehensive post on how to use Chrome Developer tools shortcut and also a list of very useful chrome developer tools shortcut.  Use the chrome developer tools shortcut for developing and use Chrome very effectively.

In the above section, we can see that we have given the detailed list of things that a developer can use to develop web sites.  It is good if the developer can use chrome developer tools shortcut to developing fast and effectively.

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments