3e:null 3f:["$","title",null,{"children":"Browser developer tools | Ben M | Observable"}] 45:[{"id":"8e1b76cfadeb02de1cd3f1552315b96046857bf3281bd54e5c5c4c20cf89b6c5d9fb09800bc73d859df2baf59e66e6e68d4064e80472ef66fb9c698a2d0bc5db","href":"https://static.observableusercontent.com/files/8e1b76cfadeb02de1cd3f1552315b96046857bf3281bd54e5c5c4c20cf89b6c5d9fb09800bc73d859df2baf59e66e6e68d4064e80472ef66fb9c698a2d0bc5db","name":"chrome-dom-inspector.png","type":"image/png","lastModified":1661110112331.105,"size":1096604},{"id":"4e7b8fd89ebc3a3b7de9fd89b112905c8b4cacbded0279c61fcbefdd5f3caebe097f59b1869da40f1313af38165516a60833ab3f94717ba53eb46f04750f56b6","href":"https://static.observableusercontent.com/files/4e7b8fd89ebc3a3b7de9fd89b112905c8b4cacbded0279c61fcbefdd5f3caebe097f59b1869da40f1313af38165516a60833ab3f94717ba53eb46f04750f56b6","name":"chrome-network-tab.png","type":"image/png","lastModified":1661110112331.105,"size":333487},{"id":"d3fd8a512eb42de1cbe42890ed2a4814be11e575585f63fb1468171e3f466d80adf2f7abecb19edbbe4e05326a1573f26afa953b3afb9d54fb38fb83354e843c","href":"https://static.observableusercontent.com/files/d3fd8a512eb42de1cbe42890ed2a4814be11e575585f63fb1468171e3f466d80adf2f7abecb19edbbe4e05326a1573f26afa953b3afb9d54fb38fb83354e843c","name":"consolelog.png","type":"image/png","lastModified":1661110112331.105,"size":259215},{"id":"329ec52001cb01e8818cb6fab6d48b894ab9b9f1534353be8b67241ae884e5cfe1ac29f821f4bf83fc38d8361d888a79b803a8739e4439f8882e8fec9f7f441a","href":"https://static.observableusercontent.com/files/329ec52001cb01e8818cb6fab6d48b894ab9b9f1534353be8b67241ae884e5cfe1ac29f821f4bf83fc38d8361d888a79b803a8739e4439f8882e8fec9f7f441a","name":"image@2.png","type":"image/png","lastModified":1661110112331.105,"size":277370}] 43:{"id":"c657ed7396120916","slug":"browser-developer-tools","title":"Browser developer tools","thumbnail":"d8526c67f484253ae5ca715215c1374554fa2c60bf8eaae3135a0bf65447da30","access_level":"public","create_time":"$D2022-08-21T19:28:32.331Z","update_time":"$D2022-08-23T02:00:31.454Z","view_time":null,"first_public_time":"$D2022-08-27T10:42:05.067Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"0181296cae5c789e","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":"starter_2024","bio":""},"version":143,"publish_version":143,"role":null,"authored":false,"authors":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"bio":""}],"members":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"role":"editor"},{"type":"individual","id":"39f8a1870c663431","login":"joshor","name":"Josh Horowitz","avatar_url":"https://avatars-next.observableusercontent.com/d28e4e0454f8d773fabbc7e9a8038fcd30f52e4fbe9f9060d4e7222f36f16bf8","tier":null,"role":"editor"},{"type":"individual","id":"c6d466f269d7496f","login":"xiaoyanw","name":"Cheryl Wu","avatar_url":"https://avatars-next.observableusercontent.com/e18bed5d10f29a14bb1960d602583b47a715db847810544bcf149d5e135cd7a3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"22cecf99ff09de42","slug":"si-579-f22","title":"SI 579 F22","owner":{"id":"0181296cae5c789e","login":"benm","name":"Ben M"}},"type":"notebook","body":{"titling":"auto","title":"Browser developer tools","cells":[{"id":0,"value":"md`\n# Browser developer tools\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md `## What are browser developer tools?\n\n[MDN: What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)\n\nEvery modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Open & Close DevTools\nIn this class, we are going to use [Chrome Dev Tools](https://developer.chrome.com/docs/devtools/).\nThere are three ways to pull up the DevTool:\n- Keyboard\n - Ctrl + Shift + I or\n - MacOS: ⌘ + ⌥ + I \n- Menu (the three dots in the upper right corner)\n - Menu > More Tools > Developer Tools\n- Context menu\n - Right click on a webpage and choose *Inspect Element*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"## See What Your JavaScript is Doing\n A common way to see a variable;'s value is to use console.log(variable, which outputs to the \"Console\" tab of developer tools.\n\n⭐TIP⭐: Because it is common to have MANY uses of console.log(), make the first argument a string _describing_ the variable, and the second the actual variable.\n`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"FileAttachment(\"consolelog.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"Another very helpful tool is adding `debugger;` within a block of code you're trying to make sense of. If developer tools are open, the browser will stop at `debugger;` and you can see the values of all available variables, the code that was called prior to reaching that point, and more. [More info on debugger;](https://developer.chrome.com/docs/devtools/javascript/),","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"md`## Viewing and Manipulating the DOM (aka the underlying code that makes the page)\n\nOnce opening the developer tools, the inspector panel will show up by default.\nThe inspector tool shows what the HTML looks like on the current webpage, as well as the CSS applied to the elements.\nIt also allows you to play around the HTML and CSS and see the results rerflected live in the browser.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`### The DOM Inspector\n\nYou can pick an element from the page by (1) right clicking the element to open the inspector, (2) hovering the mouse over the DOM list with the dev tool opened, or (3) using the selector left to the *inspector* button with the dev tool opened.\n\n

\n\nThere are several ways to edit the DOM.\n\nYou can directly edit the content by double clicking the element in the DOM list.\nOr you can right click the element in the DOM list and a list of available options will show up.\n\nNote: The dev tool allows you to make any changes you'd like. However, it only reflects on your browser. You cannot save the changes, or preserve the changes when reloading the page.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md` ## Network Tab\n\n**DO THE FOLLOWING TO MITIGATE MAJOR FRUSTRATION** Be sure to checkmark the \"Disable cache\" option, and have the inspector open while developing (does not need to be on the network tab, the inspector just needs to be open). This prevents cached versions of assets from loading, ensuring that your latest edits are loaded - not a cached older version of the file.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"FileAttachment(\"chrome-network-tab.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`\nThe [network tab](https://developer.chrome.com/docs/devtools/network/) displays every asset requested by the page. Every image, CSS file, JavaScript file, etc are represented here. Some of the benefits of using this tab:\n- This list includes requested assets that didn't load - it's an easy way to find out if a file path is incorrect.\n- You can see the contents of the loaded asset, so you can confirm the browser is loading the version you're expecting it to load.\n- Identify performance problems. This is an easy way to spot things like 5MB images that only need to be 400k, excessive numbers of CSS or JS requests that could be aggregated, and determining if [time to first byte](https://developer.mozilla.org/en-US/docs/Glossary/time_to_first_byte) is slow and potentially something server side.\n- Set throttling (it's next to \"disable cache\") to simulate slower networks and devices. Use throttling to find out if your applications will perform unbearably slow on 3G before they go live!\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"