Chrome Developer Tools Tips - Tricks You Must Know NOW

Leave a Comment


Chrome Developer Tools Tips - Tricks You Must Know NOW: Chrome Developer Tools provides web developers deep internals of webpage and browser and after spending few months We Hack For Security have found few new tricks and tips which will literary improve your workflow.

Chrome Developer Tools Tips - Tricks You Must Know NOW

Chrome Developer Tools Tips - Tricks You Must Know NOW
Chrome Developer Tools Tips - Tricks You Must Know NOW


 1. Color Picker You can ever have in Web Browser itself

Just click on the color which is beside that hex code and the color picker will open and you can choose any appropriate color you like and it will automatically get its hex value. How cool is that ?

2. Quick Access to CSS selectors:

Using CTRL / Cmd + Shift + P in the source penal it will show you the selectors and methods.


3. You can search through all files using Ctrl + Shift + F.

4. Quick File Switching: 

Chrome Developer tools provides awesome feature like quick and easy switching between multiple files Using just Ctrl + P or Command + P when Chrome developer tool is opened.

5. Search Within Source code: 
Sometimes you need to search few things within source code and at that time what you gonna do if you don't have Chrome developer tools? Luckily we have it!

Hit Ctrl+Shift+F (Command + Option + F), using this method you can easily search within Source code.

6. Go to some Specific Line: 
What if you know where the problem is or you want to just move to some specific line ? you can easily do it using Ctrl+ G and or Command + L.

7. How to select Elements in Console:

Here is how you can easily select elements in console.

Just go to console and type $() which is short form of document.querySelector(). It will simply return CSS selector you which you have searched like $('div').

$$() which is short Form of document.querySelectorAll(). It will return the array of elements you have searched.

$0-$4 History of five most recent DOM elements you have selected in elements Panel and in that $0 is latest.

If you know more tricks then do let us know via comments we will publish it and we will give you the credit for the same!

0 comments:

Post a Comment