![]() My favourite feature there though is the ability to rotate the screen with a button! NetworkingĬhrome has a networking tab in its console which allows you to see all your requests and how much time each request took. There’s a dropdown to select a screen size, and you can toggle touch event emulation again or take a screenshot. Once clicked, you can again see your website in a variety of sizes. In Firefox, there is a little icon on the element inspector that toggles responsive design mode You can also emulate touch events with your mouse there. ![]() This gives you several options: from screen sizes, to user agents, to whole device setups! Perfect for testing responsive websites. Once your dev tools is open, you can choose the ‘emulation’ panel. In Chrome, you can toggle the bottom pane by pressing ESC when your developer tools is up. You can do the same thing in Firefox by simply right-clicking an element and clicking ‘hover’, it again allows you to see the effects of your CSS and see the new :hover code applying. Now, you should see your stylesheet for the :hover state! ![]() In Chrome dev tools, after you inspect an element, you can right click on the element (make sure to not do this on the body/text or it won’t work) and click on ‘force element state’, then the state you want (e.g. You can then freely inspect any :hover css code and see how it’s (not) working. One of my favourite features, which makes things much less of a pain, is the ability to trick the browser into thinking that you’re hovering over an element until you remove the flag. Emulating Element States (hover, focus, etc.) I thought I would blog about similar features in both browsers instead of focusing on one browser, and show how to use them in both of them. These are five developer tools features I use often in Firefox and Chrome. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |