Useful Browser Extensions tools for Web Developers
Published on 08 June 15
James0
Understanding Browser Extension
A browser extension as the name suggests, is a program that extends the functionality of a web browser by adding on applications. Extensions may be regarded as a plug-in or an add-on depending on certain browsers.
The popular web browsers such as Google Chrome, Internet Explorer and Mozilla Firefox do have their own set of extensions.Differences between Browsers: Chrome, Firefox, Internet Explorer, Opera and Safari
Extensions have different impacts on the different browser systems. Firefox has the most potent system, as it creates plenty of advanced extensions that outmatch the other browsers explaining why many developers use Firefox. Firefox doesn’t have an interactive permissions system, allowing extensions to simply gain access to the entire browser.
Google Chrome is also very attractive as it provides a thriving extension ecosystem that is equipped for all your programming needs. However, Chrome places restrictions on its browser extensions making its system less robust when compared to Firefox. On the other hand, the same imposed restrictions allow Chrome to present a permission system that enhances the security of the browser.
Internet Explorer, however, has little support for extensions. A few browser toolbars such as the Ask toolbar were given to users together with other software.
Tips on Browser extension:
• One golden rule is that you should be cautious when installing extensions. You shouldn’t overload your browser with extensions, as every extension is another piece of programming code processing through your browser. Similar to how you wouldn’t install a stack of redundant applications and let them wastefully run on your computer’s system.
• Chrome extensions are available from the Chrome Web Store, while Firefox extensions are available on Mozilla’s Add-ons site. Microsoft hosts an Internet Explorer Add-on Gallery website
• There are malicious browser extensions that would display ads on your site, track your browsing, and capture your passwords and private data. Furthermore, it is possible for safe extension to potentially become a malware if it does not update correspondingly with the browser.
• As such, Official extensions made by companies associated with a service should have less risk. For example, Google’s extensions are probably more secure than extensions made by an unknown person. Furthermore, you should pay closer attention to the amount of installs and reviews an extension has received to help you decide on installing it or not.
• Lastly, another tip to prevent you from installing other malicious add-ons would be to use bookmarklets instead of add-ons. Bookmarklets are codes that you can examine, and are not allowed to automatically update. They’ll only run on a page when you click the bookmarklet to load it.
Understanding Developer Tools
A developer tool on the other hand is a component of the web browser which assists in design, testing and debugging of web pages. They are different from web extensions and IDEs* as they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or a web application.
Recommended Developer tools
Firebug
Firebug is a developer tool under Mozilla Firefox that allows developers to execute live debugging, accurately analyze network usage and performance, and inspects a website’s CSS, HTML, DOM, XHR, and JavaScript.
Firebug also has a bookmarklet implementation called Firebug Lite which is compatible with Google Chrome.
In addition to debugging web pages, Firebug is a useful tool for web security testing and a pretty advanced JavaScript debugger.
Compatibility: Firebug compatible with Firefox browser
Firebug Lite compatible with Internet Explorer, Firefox and Google Chrome browsers
YSlow
YSlow is a Firefox development tool that is integrated with the Firebug.
The tool offers recommendations for boosting the page's performance, summarizes the web page's components, report statistics about the sites, and lastly provide tools for performance analysis.
YSlow also meticulously examine things that are required for a high performing website. For example, the statistics view grants you the entire size of a Web page and the list of items that are loaded when accessing a single web page (i.e. style sheets, JavaScript files and images).
Previously, this tool has been used by Yahoo! to improve the performance of their web pages. Fortunately, Yahoo! has decided to share this tool with fellow developers to facilitate a more pleasant user experience on their websites.
Webdeveloper toolbar
If you are looking for a tool that has similar capabilities to that of Firebug, but planning to apply those capabilities on the Internet Explorer browser, do check out the Internet Explorer Web Developer Toolbar.
The IE Web Developer Toolbar enables a toggle-able pane that provides easy navigation through your Web page components.
For instance, you can check how your page elements work by editing the Web page’s DOM and HTML in your browser. This would allow you to quickly change and edit DOM elements to see what happens when you execute certain actions or alter various sections of your code. You can also debug, test and inspect JavaScript with this IE Toolbar, giving you choices for applying breakpoints and exploring variable attributes.
The Webdeveloper toolbar is also available for other browsers.
Compatibility: Chrome, Opera and Firefox browsers
DebugBar
Also for IE browsers, DebugBar is a debugging in-browser developer tool. It has plenty of useful features, such as sending a Web page screenshot via email, a color picker, the capability to view both the original and interpreted code and a Console API. The tool will also help developers to compile information through a command-line interface that applies for any particular components of a Web page.
DebugBar also helps to inspect HTML and modify source codes in real time as well as analyzing the CSS and JavaScript codes.
Compatibility: IE browser
Web Accessibility Toolbar
The Web Accessibility Toolbar is another free developer tool for IE and Opera that provides a range of options for easy assessing on your site’s content accessibility. The tool also help to identify components of your webpage, has a search function for particular page structures and facilitate the use of 3rd party online applications.
Lastly, it’s able to enhance the viewing experience of people with color blindness using its ingenious grayscale converter.
Compatibility: IE and Opera BrowserIn short, Browser Extensions and developer tools are vital to web developers. Other benefits of having browser extensions are that it can also be used to protect your online privacy and alleviate malicious data threats and firewall intrusions. For more information on improving your webpage or adding additional components to your website, follow me at MyTechLogy.com for your weekly dose of tips and developer information.
This blog is listed under
Development & Implementations
Community
Related Posts:
Post a Comment
