Useful Chrome plugins
There are of course, A LOT of Chrome plugins. If you are not careful you will install way too many Chrome Plugins... and use them once. Chrome Plugins are VERY useful. Chrome Plugins will save you a LOT of time. But be careful as they will also slow the Chrome browser. They take up space in memory.
These are a few plugins I use and find useful on a day to day basis.
Fireshot enables you to capture a full web tab including automatically scrolling the page to make sure you screen capture the full length of the page.
You can edit the screenshot and add annotations. Quickly resize, crop, highlight, blur, or erase desired elements. There's a lot more you can do - worth an install.
Web developer toolbox is a set of tools for web developers :)
It's a large collection of tools to help developers view information about websites, including:
It will outline the page and show outlines for DIV's, headings, CSS, etc. You can extract image links and a lot more. One of those essential chrome plugins for web developers!
Meta SEO Inspector
Meta SEO Inspector gives you quick and dirty tools to quickly SEO inspect a web page. I use this a lot to do a quick check that any page has the correct SEO structures.
It will check things like:
Meta Description and title tag
Plus a lot more...
Stylebot is a browser extension which lets you modify the appearance of any webpage and sync your changes across browsers.
You can use on both Chrome and Firefox
It's very useful when you're changing the style of a website with just CSS and want to see those results, even when you have closed that session and started a new one - e.g. the new styles will stick just for your browser.
You can either change styles by using their editor or by using their 'picker' allowing you to pick an element from the web page and see it's properties - a bit like the chrome inspector.
It's easy to switch on and off when testing new styles on a site and, of course, you can export the CSS to whatever style sheet you want to use it in. It's free of course and can sync the styles across computers if required.
Stylebot is also supported and maintained on GitHub - check it out here: https://github.com/ankit/stylebot
Check my Links
Check my Links is a plugin to rip through your website and highlight which links are invalid (e.g. 404 pages - page not found issues).
A Chrome Extension which checks links on webpages and shows their HTTP response codes. This allows web content editors to quickly see which links are broken (for whatever reason) and which resolve correctly.
It will also identify which links have redirects (useful if you want to check if links are redirecting the correct page) and you can export all the link information to a CSV file to analyse in a Spreadsheet if required.
The plugin is supported on GitHub here: https://github.com/PageModifiedOfficial/Check-My-Links
Install it for Chrome here: https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf
Cool SEO Tool
Simplify usual SEO tasks, onPage data, highlight semantic markup and extract links.
The Cool SEO tool is a simple chrome extension that packs quite a punch. This breaks down the page viewed with information that will help understand the SEO structure of page; headings, title tag, meta description, header information from the server, etc.
There are some extra nice features like being able to export up to the first 100 SERP results in a CSV file, toggle images and CSS on and off.
I like being able to see the ALT text, on the actual page of all the images and more importantly check they are there with the correct text.
Export SERP titles, métas & URLs in .csv
Export all links from current page to .csv file
Highlight On Page SEO data
Work with lists : combine, dedup, intesection, ... list of URLs or keywords
Sitemap generator from list of URLs
Links to domain web services
On / Off CSS or images
Domain checkers : HTTPS, Whois, DNS
Simple but effective. Check out the Cool SEO Tool.
CSSViewer is a simple CSS property viewer for Google chrome originally made by Nicolas Huon as a FireFox addon.
Hover over any element on a page and this tool will show you everything about the CSS for that element - in a lot of detail.
CSSViewer shows the css parameters of any element in a web page. To enable/disable CSSViewer, simply click the toolbar icon and then hover any element on you want to inspect in current page.
If you hit (f) on an element it will freeze that information and (c) will show the CSS for the element that can be copied and pasted for ease.
The CSS copied is categorised into sections covering font, colour, box model info, etc. which is very useful when keeping your CSS structured.
Right click on any element, select which element you want to see in 'console' and select it. In the inspector console the information will be displayed. The one I like is the simpleCSSDefinition, which outputs all the defined CSS for that element in a structured way. You can of course then copy this information if you like for your own stylesheet.
CSSViewer console > element.simpleCssDefinition.
CSSViewer source code is publicly available on GitHub for anyone to help and contribute.
Check it out and install it.