Master your debugger
•Download as PPTX, PDF•
0 likes•131 views
Master your debugger using Google Chrome Developer Tools
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Recently uploaded
Recently uploaded (20)
Master your debugger
- 2. master your debugger; using Google Chrome Paul Comanici
- 3. About me Tech Lead @8x8 @darkyndy
- 4. Topics ● Elements ● Console ● Network ● Sources
- 5. Elements
- 6. Console
- 7. Network
- 8. Sources
- 9. Resources ● https://developers.google.com/web/tools/chrome- devtools/● https://www.youtube.com/user/ChromeDevelopers ● https://chrome.google.com/webstore/detail/angularjs- batarang/ighdmehidhipcmcojjgiloacoafjmpfk ● https://chrome.google.com/webstore/detail/react- developer-tools/fmkadmapgofadopljbjfkapdkoienihi
- 10. Thanks “Learning is hard work, but everything you learn is yours and will make subsequent learning easier.”-- Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming
Editor's Notes
- - use https://www.8x8.com/ $html - edit/delete/add element - drag & drop $css - color picker -- palets -- color format (check style, it is updated)
- - use https://github.com/reactjs/react-router - $0 ... $4 - $_ - write function with new line (SHIFT + ENTER) function salute(str) { return `${str} Codecamp CJ`; } - reference element by writing id, readme function saluteDbg(str) { debugger; return `${str} Codecamp CJ with debugger;`; } - monitor(saluteDbg) - saluteDbg('some'); - unmonitor(saluteDbg); - debug(salute); - undebug(salute);
- - use https://www.facebook.com/ -- for general -- for XHR stack trace - use http://cluj.codecamp.ro/#agenda - show Filmstrip (capture screens) - check network performance performance.getEntriesByType('resource').filter(item => item.name.includes("ActualDeCluj.png")) more info https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/imgs/resource-timing-api.png - DOMReady & Load - new XHR fetch('http://cluj.codecamp.ro/images/speakers/steve.darwin.jpg').then(r=> { console.log(r) r.blob().then(a => {console.log(a)}) })
- - use http://cluj.codecamp.ro/#agenda - check subtabs (source/content source/snippets) - check async, very useful when debugging - breakpoints - conditional breakpoints - stacktrace - inline edit