This works quite well with CSS files, and does a decent job with JavaScript, though some information (like variable names) is lost in the minification process. But luckily DevTools provides a tool that makes doing this a bit easier.Īfter opening a minified file in the “Sources” tab, you can click the brackets logo in the lower left corner of the file, and DevTools will “prettify” the code. Prettify CSS and JavaScriptĭebugging or viewing minified JavaScript and CSS is very difficult. You can then test your styles by checking the :hover element state to simulate hovering on the element. To add styles for those pseudo states, add a new selector (with the + icon) and add : to the end of the selector string.įor example, to add a hover rule to an li with class logo, make a new selector, li.logo:hover, and add styles there. This tool lets you simulate the element pseudo states of hover, active, focused, and visited and view styles that are associated with those selectors. Simulate Element Pseudo StateĪnother handy tool for styling elements is the element state simulator, which is accessed by clicking the :hov icon in the upper-right corner of the Styles panel. In addition, you can use the arrow icons to scroll through a list of preset animations to apply to your element. The animations viewer lets you individually control the curve for each property CSS animation controllerĬlicking on the purple curve icon in an element’s transition property lets you view the motion curve for an animation, and fine-tune its properties. This is particularly useful for a site that is buzzing with animated content. Recently, the Chrome team added a number of new features for debugging and for creating animations.Ĭlicking the dropdown in the upper-left corner of the console reveals an “Animations” pane that lets you limit the speed for all animations on a site. This stores the object as a global variable accessible in the console called temp1 which you can then work with using JavaScript.
To do so, right click on an object in the console and press “store as global variable”. Luckily, Chrome makes it easy to inspect such objects with JavaScript. Inspecting complicated objects that are logged to the console can sometimes be tricky if they have many keys, or contain values that are hard to parse manually. This tool is great for quickly selecting an element on the page since hitting cmd + shift + c will open the dev tools and go straight into selection mode.
Once activated, you can move your mouse around the page and preview selection, then click to select an element to inspect. This tool, activated by pressing the mouse icon in the upper-left corner of the dev tools panel (or with cmd + shift + c), lets you select elements on the page simply by clicking on them. I sometimes find this easier on my eyes, and, obviously, it looks much cooler :) Selection ModeĬhrome Developer Tools (DevTools) offer a number of ways to select elements - the most convenient of which is the selection mode. You can enable it by clicking the three dots icon in the upper right of the dev tools pane, clicking “settings”, and then toggling the theme. Dark ThemeĬhrome comes with a built-in dark theme for the dev tools. But there are a number of lesser-known features that can dramatically improve your debugging or app creation workflows. You may already be familiar with the basic features of the Chrome Developer Tools: the DOM inspector, styles panel, and JavaScript console.
0 kommentar(er)
