Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google Chrome DevTools features overview

988 views

Published on

This presentation has been prepared by Oleksii Prohonnyi for internal JS team meeting to improve skills of junior developers.

Published in: Software
  • Be the first to comment

Google Chrome DevTools features overview

  1. 1. Google Chrome DevTools features _by Oleksii Prohonnyi
  2. 2. OVERVIEW
  3. 3. Chrome Developer Tools  The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.  Sections: Elements, Resources, Network, Sources, Timeline, Profiles, Audits, Console  https://developer.chrome.com/devtools  Latest version of Chrome Canary: https://www.google.com/intl/en/chrome/browser/canary.html
  4. 4. SHORTCUTS
  5. 5. Keyboard Shortcuts  The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. Outlined below is each shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.  https://developer.chrome.com/devtools/docs/shortcuts  Categories: Opening DevTools, All Panels, Elements Panel, Styles Sidebar, Sources Panel, Code Editor Shortcuts, Timeline Panel, Profiles Panel, Console, Screencasting, Emulation, Other Chrome Shortcuts
  6. 6. Useful shortcuts Windows/Linux Mac Open / switch from inspect element mode and browser window Ctrl + Shift + C Cmd + Shift + C Text search across all sources Ctrl + Shift + F Cmd + Opt + F Toggle edit as HTML (Elements) F2 - Step out of current function (Sources) Shift + F11, Ctrl + Shift + ; Shift + F11, Cmd + Shift + ; Go to member (Sources) Ctrl + Shift + O Cmd + Shift + O Go to matching bracket (Sources) Ctrl + M - Clear Console (Console) Ctrl + L Cmd + K, Opt + L
  7. 7. ELEMENTS
  8. 8. Select an element in the page to inspect it  Right-click any element on the page the page and select Inspect Element.  Press Ctrl + Shift + C (or Cmd + Shift + C on mac) to open DevTools in Inspect Element mode, then click on an element.  Click the Inspect Element button Inspect icon at the top of the DevTools window to go into Inspect Element Mode, then click on an element.  Use the inspect() method in the console, such as inspect(document.body). See the Command-Line API for information on using inspect.
  9. 9. Navigate the DOM  You can navigate through the DOM structure using either mouse or keyboard.  To expand a collapsed node , double-click the node or press Right arrow.  To collapse an expanded node , double-click the node or press Left arrow.  As you navigate, the Elements panel shows a breadcrumb trail in the bottom bar.
  10. 10. Scroll into view
  11. 11. Set DOM breakpoints
  12. 12. View element event listeners
  13. 13. Trigger pseudo-classes on element
  14. 14. Metrics pane
  15. 15. Even more  Edit DOM nodes.  Edit attributes.  Edit DOM nodes as HTML.  Move elements.  Delete elements.  Edit and create styles through styles pane.  Edit css animations speed.
  16. 16. NETWORK
  17. 17. SOURCES
  18. 18. Debugging JavaScript  As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.  https://developer.chrome.com/devtools/docs/javascript-debugging
  19. 19. Debugging with breakpoints
  20. 20. Breakpoint menu
  21. 21. Interact with paused breakpoint
  22. 22. Conditional breakpoint
  23. 23. Asynchronous JavaScript debugging  To view the execution path including asynchronous JavaScript callbacks such as timer and XHR events, check the Async checkbox.  Further information and examples using async call stacks can be found in Debugging Asynchronous JavaScript with Chrome DevTools on HTML5Rocks.com.
  24. 24. The Long Resume  When paused, click and hold the resume button to "Resume with all pauses blocked for 500 ms". This makes all breakpoints disabled for half a second, naturally. Use this to get to the next event loop, so you can avoid hitting breakpoints continually exiting a loop, for example.
  25. 25. Live Editing  While at a breakpoint, it's also possible to live edit scripts by clicking into the main editor panel and making local modifications.
  26. 26. Local modifications history
  27. 27. Pretty Print
  28. 28. Even more  Console drawer.  Breakpoints in Dynamic JavaScript.  Pause on Next JavaScript Statement.  Pause on Exceptions.  Pause on Uncaught Exceptions.  Breakpoints on DOM Mutation Events.  Breakpoints on XHR.  Breakpoints on JavaScript Event Listeners.  Source maps.
  29. 29. TIMELINE
  30. 30. Timeline modes In addition to the detailed Records view, you can inspect recordings in one of three modes:  Events mode shows all recorded events by event category.  Frames mode shows your page's rendering performance.  Memory mode shows your page's memory usage over time.
  31. 31. Tips for making recordings  Keep recordings as short as possible. Shorter recordings generally make analysis easier.  Avoid unnecessary actions. Try to avoid actions (mouse clicks, network loads, and so forth) that are extraneous to the activity you want to record and analyze. For instance, if you want to record events that occur after you click a “Login” button, don’t also scroll the page, load an image and so forth.  Disable the browser cache. When recording network operations, it’s a good idea to disable the browser’s cache in the DevTools Settings panel.  Disable extensions. Chrome extensions can add unrelated noise to Timeline recordings of your application. You can do one of the following:  Open a Chrome window in incognito mode (Ctrl + Shift + N).  Create a new Chrome user profile for testing.
  32. 32. PROFILES
  33. 33. JavaScript & CSS performance The Profiles panel lets you profile the execution time and memory usage of a web app or page. These help you to understand where resources are being spent, and so help you to optimize your code. The provided profilers are:  The CPU profiler shows where execution time is spent in your page's JavaScript functions. Read more  The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes. Read more  The JavaScript profile shows where execution time is spent in your scripts.
  34. 34. RESOURCES
  35. 35. Managing application storage The Resources panel lets you inspect your application's local data sources, including IndexedDB, Web SQL databases, local and session storage, cookies, and Application Cache resources. You can also quickly inspect your application's visual resources, including images, fonts, and stylesheets. Read more
  36. 36. AUDITS
  37. 37. Page audit  The Audit panel can analyze a page as it loads. Then provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.  For further insight, it is recommended to use PageSpeed Insights.
  38. 38. CONSOLE
  39. 39. Working with the Console  The JavaScript Console provides two primary functions for developers testing web pages and applications. It is a place to:  Log diagnostic information in the development process.  A shell prompt which can be used to interact with the document and DevTools.  https://developer.chrome.com/devtools/docs/console-api  https://developer.chrome.com/devtools/docs/commandline-api
  40. 40. console.log(object [, object, ...]) Format Specifier Description %s Formats the value as a string. %d or %i Formats the value as an integer. %f Formats the value as a floating point value. %o Formats the value as an expandable DOM element (as in the Elements panel). %O Formats the value as an expandable JavaScript object. %c Formats the output string according to CSS styles you provide.
  41. 41. console.log(object [, object, ...])
  42. 42. console.debug/info/warn/error
  43. 43. console.assert(expression, object)
  44. 44. console.count(label)
  45. 45. console.dir(object)
  46. 46. console.group(object[, object, ...]) console.groupCollapsed(object[, object, ...]) console.groupEnd()
  47. 47. console.time(label) console.timeEnd(label)
  48. 48. Even more  debugger;  console.clear();  console.dirxml(object);  console.trace(object)  console.profile([label]);  console.profileEnd();  console.timeStamp([label]);
  49. 49. EXTRAS
  50. 50. Further reading  Device Mode & Mobile Emulation  Remote Debugging  DevTools Videos  Developing and Debugging extensions
  51. 51. Oleksii Prohonnyi facebook.com/oprohonnyi linkedin.com/in/oprohonnyi

×