5 useful Chrome addons for Joomla developer
Google Chrome is the main browser of many Joomla developers. It is easy to understand why: It is fast, user-friendly, functional with an immensely large amount of tool for developers. In short, it will save you a lot of time and effort.
Let’s check!
Web Developer Extension
- Link: Web Developer
A lot of Joomla developers admit that they can’t live without this tool. A kind of all-in-one extension with more than 100 options to temporarily tweak website elements you need for your development process or bug fixing –Disable JavaScript, Disable All Styles, Validate CSS and Resize browser window are some of that. Powerful, practical, efficient – Just verify it yourself!
Version check Extension
- Link: Version Check
This little secret yet powerful extension helps indicate the platform empowering websites, which version they are using and whether the version is outdated without viewing page source code.
Once installed, a tiny platform icon will be displayed on the right of the address bar anytime you browse a website. This extension works well with not only Joomla but also Drupal, Magento (Community Edition only), MediaWiki and OpenCart.
Web Developer Checklist Extension
- Link: Web Developer Checklist
This is not a popular Google Chrome extension; however, I find it quite useful for Joomla developers who always want to make sure that their websites have followed the best practices. Thanks to it, you will get a quick overview of common areas in your website – SEO, Mobile, Usability, Accessibility, Environment Integration and Performance.
Mobile Emulation Features in Chrome Developer Tools
Your Joomla website should run smoothly on multiple devices as the mobile audience grows day by day. You can get a mobile preview on an Emulator, resize the browser window or way better - use the powerful Mobile Emulation Tool by Google Chrome.
You will be able to visualize your website on 20+ devices and multiple resolutions – ranging from popular mobiles, tablets to laptops with Retina display included. It allows you to evaluate the website on different screen size and orientation of the device, plus any network connection manipulation. Definitely you can inspect CSS media queries and make corrections.
Otherwise, you can try our huge number of responsive design templates which can be easy to customize for every single device such as desktop, laptop, tablet or mobile phone.
Debugging minified CSS/JavaScript
- Link: Debugging JavaScript
CSS and JavaScript minification are standard techniques to combine files, speed up your website loading time as a consequence. However, it is intentionally made for the machine, not for human. So it would be a nightmare if you need to dig into minified code, tinkering around and tweak it out temporarily to debug something out.
Google Chrome makes it easy with the Pretty Print feature. You just need to right-click > Inspect Elements >> Choose “Sources” Tab >> Hit Pretty Print button to pause all exception, then the CSS/Javascript code will be de-minified for you to debug and set breakpoint easier.
Of course, you should note that if you refresh the page you will lose all of the changes. This technique is only meant as a quick and temporary debugging resolution
In conclusion
I hope that you find this blog post useful. Take your time to enjoy a coffee, try out these tips and make comments if you have anything to share!
If you are looking for some amazing templates for your business website or even for a personal blog or portfolio, let explore our JoomlaShine templates and designs!
