![]() You’ve also got a live window measurer so when you manually adjust the screen size you know what dimensions you’re working with. You can open the extension as a popup which saves a lot of hassle cause you don’t have to keep selecting the toolbar. You can customise the device list to suit whatever tech you’re testing your webpage on. It will automatically resize your screen to the selected size. Once you install the tool there will be a drop-down with the different options for device screen dimensions. It’s the most popular resizer extension with over half a million users. Window ResizerĪs the name suggests, this particular Chrome developer tool resizes screens so you can emulate various screen resolutions to test your website(s). Eye Dropper is available for Chromium as well (yay privacy!). I don’t know how much of a fan of colours you are, but there are a few other features within the extension you can use to dive into the CSS of the webpage. You’ll be able to see the RGB values and the hex values and even access your history with the tool which is handy if you can't recall that webpage you were admiring. If you click on the colour it’ll copy to a clipboard so you can easily access it. With Eye Dropper, you can hover over a webpage and identify specific colours. Instead of messing around with inspect or diving into brand guidelines (if they exist at all!), you can use this handy little Chrome extension. Just like with website fonts, at some point in time yore going to want to know what colour codes display on a web page. This is the font extension you won’t need until you need it. This extension was created by Chengyin Liu, a software developer at Airbnb, so you know it’s good. You can use the tool to collect samples from the web or simply answer those questions that keep you awake at night. If you click the font, it’ll display a small window with font size, weight, family, style, line height, and colour. Install the extension, click the icon, and hover over any font and the tool will tell you its name. Basically, a shortcut so you don’t have to inspect each element. WhatFont (not to be confused with What Font) is a really popular chrome developer tool used to identify what fonts are on a webpage. That’s basically all there is to this extension but if you want to learn more click here. The extension offers a pro version but I think it just provides contact information related to the company (I haven’t signed up for it). There’s no signup, no details required with the free version, just install and head over to any website you’re curious about. With it, you can see which JavaScript libraries the site is using as well as the e-commerce platform, the CMS, Analytics, frameworks, PaaS, and a bunch of other web info. And Wappalyzer makes it easy to quickly check while browsing. Personally, I’m always curious about what technologies my favourite websites are utilising. Use it for inspiration or competitor analysis. WappalyzerĪre you curious about what makes a website tick? Well, with the Wappalyzer chrome web developer tool you can find out all the technologies a website is using at a glance. If you want to find out more you can head over to his site and check out the source code and a full list of the features. It’ll certainly make this tool a definite must-have. Shout out to Chris Pederick who put it together! From what it looks like, he plans to add a bunch of other tools to the extension so I’m really looking forward to when those features get added. This means if you love it, you can use it to debug and inspect everywhere. ![]() And one great thing about the extension is that you can run it across all popular browsers (Firefox, Opera, etc.) and on whatever operating system you’re using. With these handy tools, you can inspect elements and start debugging your website(s). Some of the most used ones include Clear Session Cookies, Display element Information, Display Image File Sizes, Display Topographic Information, and Edit CSS. After you install this tool to the Google Chrome toolbar, you’ll get access to a bunch of different web developer tools. This tool is like a pocket knife, there’s a bunch of different things you can do with it. There might be some overlap, but my hope is that with this list, you’ll discover a few more gems to add to your toolbar.įirst up we have the Web Developer extension. Now you probably already have a couple of favourite Chrome extensions, whether that’s at your web development job or just during general browsing. ![]() It’s one of the most popular and reliable browsers with around 2.65 billion internet users to date! Chrome’s biggest selling point is its smooth integration with other Google apps, making it a top pick for online workplaces. If you’re a web developer chances are you’re familiar with Google Chrome.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |