In the Styles pane, you can add, remove and change CSS properties. Properties: inspect the selected element and its children in detail.DOM Breakpoints: inspect the breakpoints assigned to the selected element.Event Listeners: inspect the event listeners assigned to the selected element.It also provides the Box model interface, which assists in styling the selected element. It displays a couple of additional panes: Use the CSS pane of the Elements panel to add and modify CSS of the page. Set Breakpoints: allows you to set up breakpoints for executing JavaScript.ħ5% DISCOUNT CSS Interface: Easy Modification of CSS Rules.Scroll into View: scrolls the viewport to display the selected element.Select State: allows you to trigger a certain state on the selected element.Expand and Collapse: expands all child elements and the selected one, or collapses them in the interface.Hide and Delete: makes the element invisible and removes it from the layout using the display:none style rule, or simply deletes it with its children.Edit, Add and Copy: allows you to directly modify HTML.It gives you a multitude of options to easily modify HTML you selected: The bar below also shows the DOM hierarchy, allowing you to review any of the currently selected element's parents.Īdditionally, if you right-click any of the elements, a menu like this will be displayed:
#Inspect element chrome for mac full#
In this pane, you have full control over HTML: The DOM interface in the Elements panel shows the DOM layout of the website you are currently in. Inspect element features in Chrome, Safari, Firefox, and other browsers have differences, so bear in mind that this tutorial is only for Chrome DevTools Elements panel.
#Inspect element chrome for mac how to#
Learn how to inspect element, analyze code of web pages, manipulate CSS rules and HTML, and test new features. In this tutorial, we will only talk about the DOM and CSS panes of this panel (the Console has its own tutorial).