Hidden man

Chrome Developer Tools Secrets

When we are doing frontend tasks, Google Chrome Developer Tools can be a great help. We can use it with many purposes, CSS debug, JavaScript debug, performance analysis…

We are going to speak about one feature not well known. I bumped into this feature when I was trying to save JavaScript objects from console, and I did not manage to do it. I tried saving them from console save option, but the format was not JSON format so I looked for a solution (when you save output JavaScript objects from console, object() it is going to appear before every object definition).

Sometimes recover Javascript objects for our app could be useful to do different things like mocks in test development.

Imagine you can use a new console function, console.save, and this function has two arguments, a JavaScript object and a filename and it returns a file with the object JSON.

This and many other helpful things can be done trough Snippets. You can find a lot of them here.

How we can use them:

  1. Open Developers Tools in Chrome.
  2. Click on Sources Tab.
  3. On the left panel you will have several tabs: Sources, Content scripts and Snippets.
  4. Click on the last one.
  5. Click with the right mouse button on the empty tab content and should appear a new option.
  6. Click on new option, you are going to write your first Snippet. Write a name for it.
  7. Write the code in the right panel and save it.

After that you can use your snippet, to do it, click the snippet with the right button and and select run option.

Capture Chrome Web Developer Tools

Once you have run it, every statement in your JavaScript code that use it will run your snippet code.