Browser Developer Tools – some useful tools for new browser developers.

In my last post I have listed some useful WebKit links and this post will list some tools useful for new browser developers.

  1. Web development tools integrated in browser
    1. User Agent Switcher
      1. Chrome User Agent Switching
      2. Firefox Add-on: User Agent Switcher
    2. URL Shortners
      1. Google URL Shortener
      2. Tiny URL
      3. Mobile Tiny URL
    3. Data URLs
    4. JSFIDDLE -Try and easily share your code with someone to try it


    Web Development tools integrated in browser:

    Web Development tools integrated in browser are very useful to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

    For Google Chrome you just need to right click and click on “Inspect
    Element” to open development tools. Just look at all the panels one by one and know more about its usage.

    With “Elements” panel, you can edit HTML, CSS and JS in live webpage. With “Console” you can run all your JS commands directly. For example, just type alert(navigator.userAgent); and press
    enter, it will show alert displaying user agent string. For web developers, “Audits” panel provides some details about improving web page performance. If you are looking at some network request/response related bug, “Network” panel is very useful. It shows all the request/response headers and response. It also shows request and response cookies if there are any.

    For Firefox, you need to install Firebug – Add-ons for Firefox. Once installed you just need to right click and click on “Inspect Element” to open development tools.


    User Agent Switcher:

    When you request a webpage, your browser sends a number of headers including user-agent string. The User-Agent string is often used for content negotiation, where the web server selects suitable content or operating parameters for the response. For example, the User-Agent string might be used by a web server to choose website variants based on the known capabilities of a particular version of client software.

    While fixing browser bugs or developing browser features, many times you need to test how a website looks for some browser variant, for example mobile browser, desktop browser, internet explorer, webkit based browser, etc. User Agent Switcher is a useful tool that allows us to change browsers default user agent.

    One way to know the user agent for you browser is, just type the following into the address bar of your browser.

    data:text/html,<script>alert(navigator.userAgent);</script>


    Chrome User-Agent Switching:
    (Available only in chrome 17+)

    1. Open Developer Tools
      Control+Shift+I or Settings->Tools->Developer tools.
    2. Click on the settings gear in the bottom right corner of developer tools window and check “Override User Agent”
    3. Select the user agent from the list shown or select “other..” and add your’s if it is not there in the list.
    4. Refresh webpage.

    Chromium User Agent Switching


    User Agent Switcher – Add-on for Firefox:
    Available at: https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

    Once installed, it adds user agent sub menu under “Tools” menu. You can add as many users agents as you wish and then select anyone to check how a perticular site will look for that user agent string.
    Just do a google search to find out more about it.

    Internet Explorer User-Agent Switching:
    I have just heard that add-ons are there for latest IE as well but I haven’t tried, so you need to google it to find more…


    URL Shortners:

    URL shortners are used to make URLs substantially shorter in length and still direct to the web page that has long URL. I have listed down some good URL shortners here. Shortened URLs are very easy to type specially when you are testing on actual devices:

    Google URL Shortner http://goo.gl
    Apart from just shortening the URLs, it also stores all the shortened URLs by perticular user for feature reference if you have already signed into a google account.

    TinyURLhttp://tinyurl.com
    One thing I liked about tinyURL is that it also allows shortening of data URLs which I find very useful in some cases.

    Mobile Tiny URLhttp://www.mobiletinyurl.com/
    I find this very useful on mobile devices as it also makes sure that only the first letters of each keypad number are used. For example, tinyURl for http://arunpatole.com/blog/2011/webkit-documentation/ is ad.ag/awdmpj which needs only 13 keypresses as compared to the actual URL needing total 116 key presses.


    Data URLs:

    Data URL is a URL that does not locate a remote web page but has the data contained in URL itself.

    Data URLs are useful for testing small piece of html code in browsers. You don’t have to write a webpage and host it somewhere and then use its URL for testing in browsers. With data URLs you can type whatever you want to test directly as URL in address bar and test it.

    Syntax:
    dataurl := “data:” [ mimetype ] [ “;base64” ] “,” data

    Example:
    You want to test how a “Select” element is rendered then you don’t need to create a webpage, you can directly enter following data URL in address bar and check.

    data:text/html,<html><body><select><option value="one">One</option><option value="two">Two</option></select></body></html>

    If you want to refer to this url anywhere and data URL is looking bit long, then use tinyURL to shorten it and use shortened URL. Tiny url for above data URL is http://tinyurl.com/7l22q4u which is around 100 characters less in length as compared to actual data URL.


    JSFIDDLE – Online Web Editor

    http://jsfiddle.net/
    This is amazing tool that I have started using some months back. If you want to try some HTML, CSS or JS and also want to share it with someone else to try it then you don’t need to send the complete files and also you don’t need to copy the complete code. What you can do is:

    • Go to http://jsfiddle.net/
    • Create a new fiddle by typing all your HTML,CSS, and JS code in respective windowClick on “Run” to test it.

    • Once you have made sure that everything is written is correct, you can save it and get a link to this page by clicking on “Share”. Copy a link mentioned under “Share link” and share it with someone to try the code you tried.

    Try it to know more about it. Here is one sample shared URL http://jsfiddle.net/fpa22/1/
    This link also lists some good JSFiddle examples.

    1. Nice post. It is real Helpfull.

    Leave a Comment