🔋

Supercharge your debugging experience

Why talk about devtools?

alerts, console logs , etc..


In real world, we spend a higher percentage of time in reading and debugging code.


Efficient use of devtools can help with debugging and boost productivity


🔎 | 🕵🏻‍♂️ | 🎬 | 🔪

  • 👣 Walkthrough
  • 🧟‍♂️ Demos

Sources Panel

  • ‼️ Breakpoints
  • 🏷️ Modifying variables in scope
  • 🎰 The call stack
  • ⏰ Watch expressions
  • 🌀 Restart frame
  • ⚰️ Blackbox script
  • ☢️ Force script execution

Overrides

Persist changes

CSS

Javascript

Images

Snippets

automate the boring stuff.

Personal Details

Work Details

Contact Details

You're all set!


                (()=> {

                  let delay = 500;
                  const increaseDelay = () => delay += 500;

                  let form1 = $('#form1');

                  setTimeout(()=>{
                      form1.firstname.value = 'Ravi';
                  }, delay)

                  increaseDelay()

                  setTimeout(()=>{
                      form1.lastname.value = 'Sharma';
                  }, delay)

                  increaseDelay()

                  setTimeout(()=>{
                      form1.querySelector('button').click()
                  }, delay)

                  increaseDelay()

              /////////////////////////////////////////

                  let form2 = $('#form2');

                  setTimeout(()=>{
                      form2.organization.value = 'TW';
                  }, delay)

                  increaseDelay()

                  setTimeout(()=>{
                      form2.querySelector('button').click()
                  }, delay)

                  increaseDelay()


              /////////////////////////////////////

                  let form3 = $('#form3');

                  setTimeout(()=>{
                      form3.phone.value = 98765;
                  }, delay)

                  increaseDelay()

                  setTimeout(()=>{
                      form3.email.value = '[email protected]';
                  }, delay)

                  increaseDelay()

                  setTimeout(()=>{
                      form3.querySelector('button').click()
                  }, delay)

                  increaseDelay()
              })()
            

              (()=> {
                let form1 = $('#form1');
                form1.firstname.value = 'Ravi';
                form1.lastname.value = 'Sharma';
                form1.querySelector('button').click()

                let form2 = $('#form2');
                form2.organization.value = 'TW';
                form2.querySelector('button').click()

                let form3 = $('#form3');
                form3.phone.value = 98765;
                form3.email.value = '[email protected]';
                form3.querySelector('button').click();
            })()
          

Request blocking

blocking unwanted requests.

Code coverage

find unused css and js.

Console

Logging

log info warn error
trivia! what does console.debug() do ?

console.group

console.groupCollapsed


grouping stuff.

console.clear

clearing stuff.

console.table

print object as table, works for both object and arrays
console.assert

1 == 1 2 == 3

style

styling console messages.

copy

copy value to clipboard.

$

$0
$_

query, current element and last result

explore more on devtools