MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Useful Browser Extensions tools for Web Developers

Published on 08 June 15
1435
0
3
Useful Browser Extensions tools for Web Developers  - Image 1
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.

Safari and Opera also have extensions available, but similar to Internet Explorer, their ecosystems are much smaller than Firefoxâs and Chromeâs.
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.

*Interactive development environment is a software application that provides comprehensive facilities to computer programmers for software development.
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.

Compatibility: Firefox, Opera, Safari and Chrome browsers
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 Browser
In 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.

















Useful Browser Extensions tools for Web Developers - Image 1

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.

Safari and Opera also have extensions available, but similar to Internet Explorer, their ecosystems are much smaller than Firefoxâs and Chromeâs.

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.




*Interactive development environment is a software application that provides comprehensive facilities to computer programmers for software development.


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.

Compatibility: Firefox, Opera, Safari and Chrome browsers

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 Browser

In 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

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top