You’ll also notice a small menu bar at the bottom of the HTML pane. In this case the arrow reveals the tag I expected to find. As expected, I see a highlighted anchor tag.īut where’s my image? I can reveal any DOM elements nested in the anchor tag by clicking the disclosure triangle next to the. Here, I’ve inspected an image which is contained in a link. You’ll see that the element you “inspected” at the beginning is automatically highlighted with a grey or blue background. This pane is like a super-powered “View Source.” It’s structured according to the DOM, with elements nested inside their parent elements. Most of the DevTools tab is occupied by the HTML pane. You can then use the drop-down menu above the page preview or the handles on the sides of the page preview to resize the device preview window. If you click on that button, you’ll see your webpage snap into a new view. In this mode you can see what your webpage looks like at different resolutions and screen sizes. The second button turns on Device Preview mode. This tool allows you to mouse over and select different DOM elements to inspect. There are two useful buttons next to these tabs. The inspect panel is divided into several different tabs which are visible at the top of the window. There’s a lot here, so let’s examine the individual pieces. If you’ve ever used Firebug on Firefox, you might recognize some parts of it. Right click on any element in your browser and click on “Inspect” in the context menu.Ī window will pop out of the side of the Chrome browser as seen below. The Inspect tool can be found in Chrome’s context menu.
0 Comments
Leave a Reply. |