Chrome Devtools

Chrome Devtoos for FED

Transcript

1. CHROME DEVTOOLS
2. 
   ▸ Device Mode ▸ Network Conditioning ▸ Media Query Inspector ▸ Set the UA string for requests.
3. ELEMENT
    ▸ Cmd + F ▸ Use Shift + Click to change color format. ▸ Filter CSS properties ▸ Search by selector inside elements panel ▸ Command + Click on CSS to find it in the source
4. NETWORK
   
5. SOURCE
    ▸ Workspaces ▸ Cmd + O, Cmd + P ▸ Cmd + option + F,Cmd + option + O ▸ multiple selection ▸ Drag file to the editor
6. TIMELINE
7. PROFILES
8. RESOURCE ▸ Copy Images As Data URL ▸ Drag an image to your desktop
9. AUDITS
10. CONSOLE ▸ console.log(object [, object, ...]) ▸ console.log("App started"); ▸ console.log("User %s has %d points", userName, userPoints); ▸ console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);
11. DEVTOOLS
    ▸ Grunt Devtools ▸ Gulp-devtools ▸ Angularjs-batarang ▸ DevTools Theme
12. SETTINGS Settings - Google Chrome
13. ACCESS-CONTROL-ALLOW-ORIGIN Mac: open -a /Applications/Google\ Chrome.app --args --disable-web- security Windows: Google\Chrome\Application\chrome.exe --disable-web- security
14. THANKS @_