Master your debugger
Download as PPTX, PDF
0 likes131 views
This document provides an introduction to using the debugging tools in Google Chrome, including the Elements panel to inspect and modify DOM elements, the Console panel for running JavaScript and viewing errors and output, the Network panel to monitor network activity, and the Sources panel to debug JavaScript code. It also lists additional Chrome extensions and resources for debugging AngularJS and React applications. The overall goal is to help users master their debugger to more effectively debug web applications.
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
- #6: - use https://www.8x8.com/ $html - edit/delete/add element - drag & drop $css - color picker -- palets -- color format (check style, it is updated)
- #7: - 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);
- #8: - 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)}) })
- #9: - use http://cluj.codecamp.ro/#agenda - check subtabs (source/content source/snippets) - check async, very useful when debugging - breakpoints - conditional breakpoints - stacktrace - inline edit