Chrome Dev Tools

@ChromeDevTools @bmeurer Chrome DevTools

@bmeurer

@bmeurer DevTools front-end

@bmeurer DevTools front-end ...is a web app!

@bmeurer

@bmeurer * webkit.org/blog/5718/10-years-of-web-inspector 2006 2008

architecture

@bmeurer <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy"
content="..."> <meta name="referrer" content="no-referrer"> <script src="Runtime.js"></script> <script src="devtools_app.js"></script> </head> <body class="undocked" id="-blink-dev-tools"></body> </html>

@bmeurer ~300k LoC JS ~18k LoC CSS

@bmeurer { // .... "dependencies": [ "components", "data_grid", "object_ui", "sdk",
"formatter" ], "scripts": [], "modules": [ "console.js", "console-legacy.js", "ConsoleContextSelector.js", "ConsoleFilter.js", "ConsolePinPane.js", "ConsoleSidebar.js", "ConsoleViewport.js", "ConsoleViewMessage.js", "ConsolePrompt.js", "ConsoleView.js", "ConsolePanel.js" ], "resources": [ "consoleContextSelector.css", "consolePinPane.css", "consolePrompt.css", "consoleSidebar.css", "consoleView.css" ] }

@bmeurer DevTools Front-end

@bmeurer Chrome DevTools Front-end

@bmeurer Chrome DevTools Front-end Browser Network, File System, ...

@bmeurer Chrome DevTools Front-end Browser Network, File System, ... Renderer
Elements, Styles, ... <blink>

Elements, Styles, ... <blink> V8 Debugging, Profiling, ...

Elements, Styles, ... <blink> V8 Debugging, Profiling, ... CDP

@bmeurer

@bmeurer Runtime.evaluate({ expression: '21 * 2', objectGroup: 'console', contextId: 15,
// ... });

@bmeurer Runtime.evaluate({ expression: '21 * 2', objectGroup: 'console', contextId: 15,
// ... }); { result: { type: 'number', value: 42, description: '42', } }

@bmeurer

@bmeurer Cmd + Shift + P / Ctrl + Shift
+ P

@bmeurer

Elements, Styles, ... <blink> V8 Debugging, Profiling, ... CDP

@bmeurer Node.js DevTools Front-end CDP

@bmeurer Node.js DevTools Front-end CDP V8 Debugging, Profiling, ...

@bmeurer Chrome Browser Network, File System, ... Renderer Elements, Styles,
... <blink> V8 Debugging, Profiling, ... CDP

... <blink> V8 Debugging, Profiling, ... Puppeteer CDP

@bmeurer Firefox Puppeteer CDP

... <blink> V8 Debugging, Profiling, ... CDP Puppeteer

... <blink> V8 Debugging, Profiling, ... CDP Puppeteer Lighthouse

... <blink> V8 Debugging, Profiling, ... Puppeteer CDP Lighthouse GoogleBot

color scheme emulation

@bmeurer

@bmeurer await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark', }]);

@bmeurer const puppeteer = require('puppeteer'); (async () => { const
browser = await puppeteer.launch(); const page = await.browser.newPage(); await page.goto('https://v8.dev/'); // Create screenshots of your web app in Light and Dark Mode. await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'light' }]); await page.screenshot({ path: 'light.png', fullPage: true }); await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]); await page.screenshot({ path: 'dark.png', fullPage: true }); await browser.close(); })();

accessibility

Only about 35 percent of all adults have 20/20 vision
without glasses, contact lenses, or corrective surgery. — University of Iowa uihc.org/health-topics/what-2020-vision

Worldwide, there are approximately 300 million people with a color
vision deficiency. — ColourBlindAwareness.org www.colourblindawareness.org/colour-blindness/

@mathias

@mathias no vision deficiency

@mathias blurred vision

@mathias achromatopsia

@mathias deuteranopia

@mathias protanopia

@mathias tritanopia

@mathias

@bmeurer

@mathias

@mathias achromatopsia

@bmeurer

speed tooling

@bmeurer web.dev/metrics web.dev/lcp

@bmeurer web.dev/tbt

@bmeurer

cookies

@bmeurer

css overview

@bmeurer

one more thing...

@bmeurer

Thank you! @bmeurer @ChromeDevTools

Chrome Dev Tools

Chrome Dev Tools

More Decks by FrontConf

Other Decks in Technology

Featured

Transcript