20+ Questions to learn Chrome Developer Tools — Basic Level

If you’re a web developer/designer and haven’t used Chrome Web Developer Tools so far, you lack the greatest tool for your job. I've seen many people around asking very simple questions about web because they don’t know how to use this tool properly.

I started using Firefox developer tools for a while after asking myself if I get the same performance on that browser, yet, I couldn't and I switched back to Chrome as it provides us with the best performance and user experience on web development. If you are not agree with me on this, see stackoverflow on which someone gives a great answer to this. As far as I used, I can say that Firefox DevTools has four superior features over Chrome’s:

• WebGL Shader Editor: you can edit WebGL shaders live so it reprograms the GPU and renders according to changes
• Easily resend the old request: If you’re testing your app and want to send the same request or send after changing a couple of parameters you can easily do by clicking edit button on a request
• WebAudio Editor: a tools which lets you use web audio api to create new tones live on the web
• Click Events on DOM: Sometimes, you want to see if you assign the right click event to right element. For that purpose, Mozilla developer tools has an icon on the inspector page

I've tried to answer 20+ questions from basic to advanced level to make your web development easier.

Basic Level

1. How can I edit elements?

After pressing F12 / Cmd+Opt+I, you can select and double click on an element and change it live. To add or remove an element, press F2 or select right click -> Edit as HTML and start typing your code. If you find to difficult to select an element, you can click on magnifier icon and select the desired element.

2. HTML is alright, how I can edit CSS?

On the right panel, any rule you see is editable. After clicking a number property, you can change any property by up and down arrows. Use Shift or Alt button together to change by ±10 or ±0.1 units. Also, Shift+Click on a color box will change the color mode (RGB, HSL and hex). If you want to add a new property, click on a blank area below a rule and start typing the new property. To add a new rule, click on the plus sign on right top corner. New rules are written in a specific CSS page called inspector-stylesheet which is a file on the fly. After page refresh it’s cleared. In case you want to add an inline style, click on the blank space on right top corner below element.style.

3. How can I see the pseudo-class properties like :hover, :focus, :after and :before.

On the right top corner you will see a cursor on a dashed rectangle icon. It will simulate :hover, :focus etc properties. You will see a orange dot on the left of an element which is simulated. Chrome automatically shows :after and :before pseudo-elements as if they are real, so you can click and add/remove any property you want. I couldn't find these features on Firefox which made me very disappointed.

4. How can I debug a javascript code?

Come to sources tab. On the left pane, click on a javascript file you want to debug. Just click on a line number you want to debug and you’re done. What most of web developers don’t know is you can enable a conditional debugger break-point so you can stop it in specific condition. For example, let’s say you have a for loop from 0 to 1000 and you want to stop on 999th iteration. Right clicking on the line and adding a conditional rule will turn debug point color to orange and stop at that point if condition is valid.

5. Here is a crazy one… Can I change a working javascript code so it will evaluate the new code?

This is one of the fun I love on the web. We use a text editor/IDE to write our javascript code. You know how the process goes: change code on text editor, go to browser, refresh page, test it, return to editor, change code, browser, refresh page so on so forth. But, you have have an opportunity to change code on DevTools and hit Ctrl+S/Cmd+S to save and yes, your new code works on browser smoothly. It recompiles your new code if your syntax has no errors otherwise gives an error about what your syntax error. This takes a huge load off from my shoulders so development process made easy.

6. Is there any place where I can see all loaded js, css, image, audio, video, font files and cookies?

Exactly. Resources tab has this purpose. It’s the store of Chrome. You can see any resource downloaded. As a big plus, you can find the resources about fresh web technologies like WebSQL, localstorage and indexed databases here.

7. How can search a text inside all of html, css and javascript files?

On any tab, you can hit Esc to reveal a new pane which has Console, Search, Emulation and Rendering tabs. Click the Search tab and search your word.

8. I've assigned onclick, onkeypress, onmouseenter… events on a DOM element. Any way to see this?

Sure. For example, you assign an event with jQuery

$(‘#main’).click(function(){ … })

but you’re not sure if it’s attached to right element. To check if it is really assigned to right element, jump to the Event Listeners tab on the right top corner. Moreover, you can use the filter icon to filter events only attached to specific element i.e. the original target of an event.

9. What information can Chrome DevTools give me about a request?

Everything. All the parameters sent, response data, preview of a response data which is useful when the response is JSON or HTML. Plus, it gives you call stack of a request so you can see all the javascript functions in the order of triggered a request which is really awesome feature.

Let’s move to Moderate part now.

Anything wrong? missed? Let’s fix it.