8 Chrome Extensions Every Web Developer Must Have.
1-Responsive Web Design Tester
Responsive Web Design Tester is a quick and easy way to test your responsive website.
Test your mobile site on mobile devices. This extension reflects both the size and the browser of the mobile device. Quickly preview your responsive website designs at the dimensions they will be seen on popular mobile devices. RWD tester also uses the correct User-Agent, but it does not render web pages in the same way as the mobile device. It is primarily for developers who want to test how a page responds to different devices.
Supports both external and internal network (localhost). Includes presets for iOS (iPhone, iPad, IPad Pro, IPad Mini Versions 2-4), Android (Samsung Galaxy, Samsung Galaxy S6, Nexus 7, S6 Edge, Nexus 10, Microsoft Surface Pro 3, LG G5). Add your own devices if you don´t find anything that suits your needs.
Download Responsive Web Design Tester
2-Clear Cache
Clear your cache and browsing data with a single click of a button.
Quickly clear your cache with this extension without any confirmation dialogs, pop-ups or other annoyances.You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.Cookies can either be removed globally, only for certain domains or for everything except for certain domains.
Download Clear Cache
3-Page Ruler
Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page.
Page Ruler lets your draw out a ruler to any page and displays the width, height and position of it.
Features
-------------
* Draw a ruler to any page and view the width, height and top, bottom, left and right position
* Drag the edges of the ruler to resize it
* Use the arrow keys to move and resize the ruler
* Show guides extending from the ruler edges
* Manually update the size and position of the ruler from the toolbar to make precision changes
* Enable "Element Mode" to outline elements on the page as you move your mouse over them
* Navigate through parents, children and sibling elements of any measured element
4-Web Developer
Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.
5-SEOquake
SEOquake is a free plugin that provides you with key SEO metrics, along with other useful tools such as SEO Audit and many others
SEOquake allows you to:
★ Review all major metrics in a heartbeat
★ Get a thorough analysis of SERPs and export the results in CSV format
★ Estimate keyword difficulty instantly
★ Set parameters for a search query
★ Run a complete SEO audit of a webpage, including a check for mobile compatibility
★ Check your social statistics for Facebook and Google+
★ Use a wide range of default parameters or create a custom set
★ Get a full report for internal/external links
★ Determine a keyword’s density and configure a stop-word list
★ Compare URLs/domains
SEOquake consists of several tools you can use depending on which specific SEO endeavors you’re pursuing. The SEO bar is an additional toolbar located at the top of the browser window, and it presents core metrics – a number of which can be customized. The SERP overlay is a bar that appears below each SERP result. Once enabled, it gives you detailed metrics associated with each listing along with another sidebar section that allows you to sort and export your results.
Also, you can get detailed reports for a specific page you are analyzing. SEOquake has other useful tools, including, the SEO Audit tool, the Keyword Density report, Internal/External Link analysis and even social metrics. SEOquake is really easy to install and work with. The SEOquake plugin is compatible with several browser extensions and is constantly updated.So far, SEOquake has been downloaded more than three million times and counting.
6-Window Resizer
Resize browser window to emulate various screen resolutions
This extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
The resolutions list is completely customizable (add/delete/re-order).
You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.
The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer and more!
7-ColorPick Eyedropper
An eye-dropper & color-picker tool that allows you to select color values from webpages.
This extension may not yet work as expected on the mac, you will have to use the pop-out button to put the preview in it's own window, move that aside, and refocus the main window.Please note that colors are picked from a snapshot of the page that is updated only when you scroll. To take a new snapshot press r or use the re-snap button.
8-CSSViewer
A simple CSS property viewer.
CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a FireFox add-on (2006-2008).
How to use :
To enable CSSViewer, simply click the toolbar icon and then hover any element on you want to inspect in current page.
0 comments:
Post a Comment