“If I had 8 hours to cut down a tree I’d spend the first 6 sharpening up my ax “ – Abraham Lincoln.
Any Hubspot certified COS developer or editor has their own set of tools that they use to get the job done. There are lots of different desktop editors, browsers, testing tools, and all kinds of other helpful applications which can aid a developer. Just do a quick search for “web developer tools” and you will find plenty of tools that do lots of different things.
My personal favorite browser is Google’s Chrome. There are lots of reasons to use Chrome but it’s especially powerful if you are a developer. In Google’s Chrome Store you can find a variety of extensions, games, and applications to be used in your browser.
1. Web Developer Toolbar
Web Developer Toolbar is the Swiss army knife of front-end web development. The ability to manipulate HTML, CSS, Responsive Design, and many other aspects of web development make this tool perfect for developers looking to troubleshoot issues, write some temporary code or test their code.
2. User Agent Switching Tool
The User Agent Switching tool changes your Chrome browser to any other browser you wish. You can go from Google Chrome to FireFox to Safari in just a few clicks. Hubspot COS is designed for cross browser compatibility but there may be times where something doesn’t look right in a particular browser. This tool should help troubleshoot any cross browser issues.
3. Livestyle and Sublime Text 2
The Livestyle is a browser extension for chrome that connects your css file from your local editor to your live browser so you can see your CSS changes in real time. This tool works with the inspect Element tool and allows you to write your css either in inspect element or the css file itself and your changes will show in both. This extension has helped me out tremendously with custom Hubspot COS development. In addition, it integrates with SublimeText 2. There’s a bit of a learning curve but instructions can be found here .
4. Moz Seo Tool
.png?width=100&name=icon-(128x128).png "MOZ Seo Tool")
.png?width=100&name=icon-(128x128).png "MOZ Seo Tool"){kind=icon}
While Hubspot’s COS tool has a built in SEO analyzer it’s helpful to use an external extension. It may be easier for you to navigate and record your SEO findings outside of Hubspot and then go back and optimize. MOZ SEO Tool looks for elements that Hubspot’ SEO tool might be missing. MOZ Toolbar will analyze your page performance, link performance and keyword density. A great tool for any Hubspot COS Developer.
5. Screen Capture
This last tool is unrelated to Hubspot COS development but extremely useful for web development. This tool allows you to capture an entire page, a section or just what’s visible to the user at the time. You can use this tool to capture images from live sites. It is great for showing clients proofs or helping to pinpoint a troublesome issue.
What do you think ? Are there any really helpful tools out there that make you a better Hubspot COS Developer? I'd love to learn what else is out there.