About me

Experience

• PHP, Ruby

• MySQL, PostgreSQL

• Git

• HTML, CSS, JavaScript

• Server administration: Linux & Windows

Interests

Basic tips and tricks

Use Chrome Canary!

Useful Settings

• Disable cache

• Log XMLHttpRequests

• Color format as authored

• Enable DevTools experiments: #enable-devtools-experiments

• Ctrl (⌘ for Mac) + Shift + C to inspect

• Drag and drop elements

• Force element state

• “Break on...” and breaking points

Using the Console API

Writing to the console

              console.log("Nothing new so far! :@");
            

Warning and Errors

              console.warn("This might be new!");
console.error("and maybe, this one too");
            

Grouping output

              console.group("Just reminding some tips about console");
console.log("Nothing new so far! :@");
console.warn("This might be new!");
console.error("and maybe, this one too");
console.groupEnd();
            

String substitution and formatting

              console.log("%s %i of times!", "Nothing new! Have seen this", 1000);
            

Styling console output with CSS

              console.log("%cStylish output", "color: #ff0000; font-size: 16px;");
            

Listing all element properties

              console.dir(document.body);
            

Measuring how long something takes

              console.time("Measuring");
// your code here
console.timeEnd("Measuring");
            

Network timeline

• Size/Content column

• Time/Lantency column

• Initiator column

• HAR format: HTTP Archive Format

Mobile emulation

Terminal on DevTools

                  npm install -g devtools-terminal