2a:null 2b:["$","title",null,{"children":"Firefox Developer Tools | Steve Oney | Observable"}] 30:T762,md`### The CSS Editor The CSS editor displays the CSS rules applied to the selected element. Let's open the UMSI homepage, hover the mouse over the navigation bar to observe how the values in the CSS editor change.

There are several useful features: - The rules applied to the current element are shown in order of most-to-least-specific. - Clicking the checkboxes next to the CSS declaration would remove it from the current rule. - Clicking the property name or value would trigger the editing of the rule. The browser will return a live preview of a style change. - Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved. - You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page. In addition, there are a number of clickable tabs in the CSS Viewer.

- Layout: the layout area includes the box model and the grid model. - Box Model: represents visually the current element's box model, so you can see at a glance what padding, border, and margin is applied to it, and how big its content is. - Grid Model: If the page you are inspecting uses CSS Grid, this section allows you to view the grid details. - Computed: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies). - Changes: Changes to CSS in Inspector will appear here. - Fonts: The Fonts tab shows the fonts applied to the current element. - Animation: The animation panel makes it easy to scrub, pause, and visualize each animation on a webpage. `31:T4df,md`## Browser Support Different browsers render the website code differently and it is noted as **[Browser Compatibility](https://www.conversioner.com/glossary/browser-compatibility)**. In other words, Chrome will render a website Differently than Firefox or Internet Explorer will. It is important to ensure that your website is compatible across different browsers because not all people use the same browser. The major browsers to ensure your site is compatible include IE, Chrome, Firefox, Opera, Safari, and on mobile devices. Even though you test your page in Firefox, it would be good to test it out in other browsers still (especially older browsers). There is a list of things to watch out for --- CSS validation, HTML validation, font size validation, page layouts in different resolutions, all images and alignment, page styles, date formats, special characters with HTML character encoding, and so on... - [Can I Use](https://caniuse.com/) is a handy tool to lookup browser support tables for front-end web technologies on desktop and mobile web browsers. - There are also many browser compatibility testing tools available online. e.g., [Lambda Test](https://www.lambdatest.com/), [BrowserStack](https://www.browserstack.com/). `32:[{"id":"5ca19ed1f6d57aa6fd505457d490f2ce5df10bdf39f7418791a30d15bc843a3c79d700a28b7035a9b780311f9fc6927e1f52460fb6d4bc9c867d6d116b48ec8f","href":"https://static.observableusercontent.com/files/5ca19ed1f6d57aa6fd505457d490f2ce5df10bdf39f7418791a30d15bc843a3c79d700a28b7035a9b780311f9fc6927e1f52460fb6d4bc9c867d6d116b48ec8f","name":"image@3.png","type":"image/png","lastModified":1609957369253.53,"size":45547},{"id":"329ec52001cb01e8818cb6fab6d48b894ab9b9f1534353be8b67241ae884e5cfe1ac29f821f4bf83fc38d8361d888a79b803a8739e4439f8882e8fec9f7f441a","href":"https://static.observableusercontent.com/files/329ec52001cb01e8818cb6fab6d48b894ab9b9f1534353be8b67241ae884e5cfe1ac29f821f4bf83fc38d8361d888a79b803a8739e4439f8882e8fec9f7f441a","name":"image@2.png","type":"image/png","lastModified":1609957369253.53,"size":277370},{"id":"c01e24f4af05296b149e3d002abb94bf42a0e3a7a4fabebcc4df90868bb42f03ef80f0afcd3edd137168fb94730e0860c5783b4f63124f31019c5af2fec774db","href":"https://static.observableusercontent.com/files/c01e24f4af05296b149e3d002abb94bf42a0e3a7a4fabebcc4df90868bb42f03ef80f0afcd3edd137168fb94730e0860c5783b4f63124f31019c5af2fec774db","name":"Jan-03-2021 20-00-56.gif","type":"image/gif","lastModified":1609957369253.53,"size":12507881},{"id":"70cb64e666fe377652a1b76ee1e7d998ea0cd9e2dc639c5fc5067a383fcc314cebd6cb8d929f3d6ca28dac95b028de981a9674347951ea582d5b6d73592059b9","href":"https://static.observableusercontent.com/files/70cb64e666fe377652a1b76ee1e7d998ea0cd9e2dc639c5fc5067a383fcc314cebd6cb8d929f3d6ca28dac95b028de981a9674347951ea582d5b6d73592059b9","name":"image@9.png","type":"image/png","lastModified":1609957369253.53,"size":140058},{"id":"39d98cad517bd18603995faeb6e91fd74a1106dd34c3c50465f6b8513fc46cd182c219e0e3a4dcdc6a63e4d26c0f0c24259bca2dcef08f05b10e0f4d1508e3dd","href":"https://static.observableusercontent.com/files/39d98cad517bd18603995faeb6e91fd74a1106dd34c3c50465f6b8513fc46cd182c219e0e3a4dcdc6a63e4d26c0f0c24259bca2dcef08f05b10e0f4d1508e3dd","name":"image@7.png","type":"image/png","lastModified":1609957369253.53,"size":988544},{"id":"91ac93494047b9ca551de69a1fd9bbbd3bc6750d6f56b6715a7bba5b9b2e90b2bbfa72cec560ea9540ceaaa4a52c8f75a8ab97913a3ae28e2d6215845c8cc4ed","href":"https://static.observableusercontent.com/files/91ac93494047b9ca551de69a1fd9bbbd3bc6750d6f56b6715a7bba5b9b2e90b2bbfa72cec560ea9540ceaaa4a52c8f75a8ab97913a3ae28e2d6215845c8cc4ed","name":"image@5.png","type":"image/png","lastModified":1609957369253.53,"size":2191361},{"id":"f04389577b2c861dc321a73fa4cab6d184b8a129bf8548517b84eb467becdd77902b930b1361c1e2ffcd7f0b4bce610a971556a1d485d6db7ff854dc679efb5a","href":"https://static.observableusercontent.com/files/f04389577b2c861dc321a73fa4cab6d184b8a129bf8548517b84eb467becdd77902b930b1361c1e2ffcd7f0b4bce610a971556a1d485d6db7ff854dc679efb5a","name":"image@4.png","type":"image/png","lastModified":1609957369253.53,"size":160943}] 2e:{"id":"659598b527d4f989","slug":"firefox-developers-tools","title":"Firefox Developer Tools","thumbnail":"e08f8d2809dddf5256e6244a74faf940bfd3c385f81f7fc347e2296b1a1489ba","access_level":"public","create_time":"$D2020-12-30T20:03:44.064Z","update_time":"$D2023-10-02T17:43:29.963Z","view_time":null,"first_public_time":"$D2020-12-30T20:03:45.077Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":24,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Firefox Developer Tools","cells":[{"id":0,"value":"md`# Firefox Developer Tools\n\nAuthor: April Wang\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":12,"value":"md`## Open & Close DevTools\nIn this class, we are going to use the [Firefox DevTool](https://www.mozilla.org/en-US/firefox/developer/\n).\nThere are three ways to pull up the DevTool:\n- Keyboard\n - Ctrl + Shift + I or\n - MacOS: ⌘ + ⌥ + I \n- Menu bar\n - Menu > Web Developer > Toggle Tools\n

\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"},{"id":11,"value":"md`## Viewing and Manipulating the DOM\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"},{"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"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## (Optional) Advanced Debugging with the DevTool\n\n- [Introduction to the JavaScript Debugger](https://mozilladevelopers.github.io/playground/debugger)\n- [The Firefox JavaScript Debugger](https://developer.mozilla.org/en-US/docs/Tools/Debugger)\n- [Network Monitor](https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor)\n- [Storage Inspector](https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector)\n- [Responsive Design Mode](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode)\n- [Performance Tool](https://developer.mozilla.org/en-US/docs/Tools/Performance)\n- [Memory Tool](https://developer.mozilla.org/en-US/docs/Tools/Memory)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"