Chrome rowser developer tools tricks

Quick file switching

If you’ve used Sublime Text, you probably can’t live without its "Go to anything" overlay. You will be happy to hear that dev tools has it too. Press Ctrl + P (Cmd + P on Mac) when DevTools is opened, to quickly search for, and open any file in your project.

Go to line

After you’ve opened a file in the Sources tab, DevTools allows you to easily jump to any line in it. To do so press Ctrl + G for Windows and Linux, (or Cmd + L for Mac), and type in your line number.

Select DOM objects

If you familiar with jQuery for you won't be new this constructions like $('.class'), $('#id'), $('tag') and you can use it in browser console for search DOM elements.

$ alias for document.querySelector()

    
    $('#idName')` // return first element with identificator 'idName'
    $('.className') // return first element with class 'className'
    $('tagName') // return first element with tag 'tagName'

$$ alias for [].slice.call(document.querySelectorAll()).

    
    $$('.className') // return array of all elements with class 'className'
    $$('.className')[0] // return first element in array
    
    $$('tagName') // return array of all elements with tag 'tagName'
    $$('tagName')[1] // return second element in array

$0 – $4 – A history of the five most recent DOM elements that you’ve selected in the elements panel, $0 being the latest.

Enable `text editor` mode

    document.body.contentEditable=true

Search events binded on element by selector

    getEventListeners($('selector')) // return all events by selector

    getEventListeners($(‘selector’)).eventName[0].listener // return event(first) realization code, below example for 'click' event
    getEventListeners($(‘selector’)).click[0].listener // return first realization code of click event on 'selector' element

Monitor events

Enable/disable logging events for element in console

    monitorEvents($('selector')) // monitor all events for 'selector' element
    monitorEvents($('selector'), 'eventName') // monitor specified event for 'selector' element
    monitorEvents($('selector'), ['eventName1','eventName3',….]) // monitor specified events for 'selector' element
    unmonitorEvents($('selector')) // disable monitor all events for 'selector' element

View element code

     inspect($('selector')) // return code of 'selector' element
     inspect($$('a')[3]) // return code of fourth link in DOM

Execution time track

    
    console.time('timer'); // start 'timer' timer
    console.timeEnd('timer'); // stop 'timer' timer

Show variable values as table

    // As example we have variable
    var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]
    
    console.table(variableName); // return variable values as readable table

Get object properties

    
    dir($('selector')) // return object properties in Chrome
    inspect($('selector')) // return object properties in Firefox

Calc

    
    1 + 3 // return 4
    6 * 7 // return 42
    Math.sqrt(9) // return 3

Get last retrieved result

  
    $_ // return last console retrieved result

Clear consloe and memory

    clear()

evgv/chrome_browser_dev_tools.markdown