One aspect of web development that I really enjoy is the vast amount of tools available to help build and maintain websites. Whether it be testing out a new style for a button or making a website responsive, these tools have a great influence on the development process. I have comprised a short list of Google Chrome web development tools that I think even a novice could use and benefit from.
One of my favourite development tools is the widely used Chrome DevTools. These tools have proven to be really helpful when debugging and trying to understand a web page in more depth. From the awesome Elements section where you can see and edit the pages HTML DOM tree, to adding and modifying the CSS and the Emulation section which provides a great testing environment for mobile devices. Chrome DevTools provides a huge amount of advanced and intermediate tools.
4. Page Speed Insight
Page speed is a tool that can help you to optimize your website by analysing it against various rules and standards. This tool can actually be used in different platforms, from their online site analyzer, to Chrome or Firefox extension, and Page Speed’s API. Personally I use the Chrome extension as it binds on to the Chrome DevTools and is a lot easier to access than the online analyser.
The tool is basically a checklist that will scan your website and tell you what you need to do and what has already been done. A priority rating and detail of what needs to be changed is provided, which is quite handy. An experienced web developer may not benefit from this tool as much as a beginner.
With the use of the Grunt Task Runner, most of the checklist will already be done, but never the less, this tool provides a great insight in to the speed improvements and optimizations a website needs.
The web developer checklist tool allows you to check a website through a checklist of standards and best practices. A handy link is provided with each of the checklist items to allow you to quickly sort out the issues. The checklist has a wide range of categories, such as accessibility – checking for WAI-ARIA landmarks, mobile – media queries ad view port, SEO- robots.txt and meaningful descriptions. The tool also incorporates the Page Speed insight tool, giving you even more things to check against.
The checklist is great for quickly ensuring that you have included all the necessary components to the webpage. However, as mentioned earlier, these checklist items will in time come naturally. In the meantime this proves a great way of getting to grips with and understand what a website needs to function efficiently.
Stylebot is a tool that allows you to modify the CSS of a page and save it for any subsequent visit. It comes with basic section which allows you to select an element with your mouse pointer; a tool particularly for novice users. The advanced section is pretty much a blank text area where you can add your own CSS.
The great thing about this tool is that you can share your templates with other users of Stylebot. Granted most of the templates are for Facebook, YouTube and other popular website, still it’s quite a handy tool to have around.
I have mostly used this for goofing around or seeing if I can fix an issue I have noticed. However it can of course be used for debugging as well as to show new web designs and layouts without having access to the files of the webpage.
Stylebot is a very easy to use tool that I would highly recommend adding to your extension arsenal.
The simply named Chrome extension “Web Developer” provides a whole bucket load of tools and gadgets to analyse and modify a website. There are 11 sections you can work with, from changing form information to outlining different display types, viewing a website in different responsive layouts, finding out the order of the Divs and many more.
One of the tools that I use the most is the outline tool; gives a element a type a outline to show the area in which it is contained. In addition I frequently use the responsive layout tool which provides different version of the website on one page.
As well as providing loads of tools, you can add or modify some of them. Such as resize dimensions, responsive sizes, and validations(wc3 HTML/CSS).