Sure, you can right click an item and choose Inspect element, and the element will be selected within Elements panel. Sometimes it can be a pain to modify the CSS for elements nested within dropdown menus or other UI elements that require hovering. Use the Styles panel to test out CSS changes. Manipulating CSS using the Elements > Styles panels is a great way to preview CSS changes. Dock to separate window Developer Tools undocked Dropdown Menu Tip For instance, when working on responsive designs. I prefer the undocked option when I need to do a lot of window re-sizing. (The docking button will cleverly let you toggle between your last 2 docking preferences with a single-click, and will require the press and hold technique to access the third choice). Just click and hold the docking button, then choose the Undock icon. Developer Tools docked to the side of the windowДЄlternatively, you can undock Developer Tools, giving it its own window entirely. Dock Developer Tools to the side of the window. You can dock it to the right side of the window by clicking the docking icon, located in the lower left hand corner of Developer Tools. Default docking location at the bottom of the window Docking and Undocking the Developer Tools panelД«y default, Developer Tools will be docked to the bottom of the window. This is very handy! Make sure you have Developer Tools open, then click and hold reload.

As long as you have the Developer Tools panel open for the page youвЂ™re refreshing, youвЂ™ll see a little dropdown menu that allows you to clear the cache and do a hard reload all at once. Instead, simply click and hold the refresh button. The old way of clearing the cache and reloading was to do a Control + Shift + Delete to bring up the Clear Browsing Data window, check off the appropriate items to be cleared, hit the clear button, and finally refresh the page. Sometimes Chrome seems to tenaciously hold onto cached files. Bring up Developer Tools with Control + Shift + i ( i for inspect), or just right click (almost) anything on a page and choose Inspect element. Here are some quick tips on using Google ChromeвЂ™s fantastic Developer Tools.

Quick inspect element chrome extention