Week 2.1 Browser DevTools (Inspecting Elements) PDF
Document Details
Uploaded by WorthAntigorite6300
Ngee Ann Polytechnic
Tags
Summary
This document is a presentation on browser developer tools, focusing on inspecting elements. It covers the agenda, tools, opening methods, and live editing capabilities. The presentation is geared towards web development.
Full Transcript
Browser developer tools (inspecting elements) Week 2 Last update : 10/10/2024 Agenda Get acquainted with web development tools Devtools Already comes equipped with your browser Gives us detailed information about what the renderer shows Opening devtools: context...
Browser developer tools (inspecting elements) Week 2 Last update : 10/10/2024 Agenda Get acquainted with web development tools Devtools Already comes equipped with your browser Gives us detailed information about what the renderer shows Opening devtools: context menu Opening devtools: chrome menu Opening devtools (inspector): keyboard shortcuts Windows: control + shift + i macOS: command + option + i Both: F12 Also works for firefox Element inspector Live editing Modify HTML elements and CSS properties on the go Quickly preview changes End of slides Appendix Following the cascade An element’s CSS can be affected by multiple stylesheets How do we know which styles are being applied?
