View Source Chart: Inspect the DOM at Lightning Speed

Posted by sheraz
February 27, 2011
comments (0)


If you’re a web developer and you have used Firefox's “View page source” to analyze the DOM tree then you know that it is really a time consuming and terrible activity to go through each line of code. Firefox has provided an easy solution to this problem by providing an add-on named as “View Source Chart”.

"View Source Chart" is an add-on that color codes the page source for easy browsing. It graphically shows you the tag boundaries, tag nesting order and hierarchy eliminating manual counting.


Now if you will hover over your mouse at any container, a tool-tip will display the code of that container even if the container is invisible. 
You can zoom out the charts as well by pressing [CTRL + -.] This will really helpful when you are viewing very complex and deeply nested tags. By clicking on the containers will hide or display the tag containers.
“View Source Chart” is available for Firefox and Mac.

If you are a developer and want to get rid of code cluttering the you must try it.

Firefox: Download Here

Labels:

Source: Opera’s Extension to view the DOM Tree

Posted by sheraz
comments (0)

If you are a web developer then you know that during development “View page source” of a web page is how much important and helpful to analyze the DOM tree and syntax or logical errors.
I recently found a new add-on called “Source” which gives us more features and the feature those Firefox lakes. “Source” let you view the actual DOM tree of a web page as nicely highlighted code. This best thing about this is that it also allows you the edit and save the code to make development faster.
Once you installed, just open any page. Now right click the page and select the “source” from pop up.


This will open a new tab containing the page’s source. The code is nicely highlighted by different colors so that users can understand the code thoroughly. It even wraps the lines if code lines are too large.

Now take a look what features it is offering to you.
  • Viewing nicely highlighted page-source with clickable links (href, src, url), text wrapping, line numbers.
  • View source of the selected text.
  • Syntax highlighting for source codes that was opened in Opera.
  • It wraps the code if needed, and like in “Imagus”, there is horizontal scrolling feature if text-wrap is inactive and the scroll-height is 50% bigger than window's inner-height.
  • View NFO files in browser.
  • Centering plain text or NFOs.
  • Edit/view the source of the selected element or remove element with a single click
  • CSS formatting (for now it's really dumb)

There are some shortcut keys that you can use to work in a better way.
Press Ctrl+F9 for viewing the page source or the selection source. It works for frames too, first click on the desired frame and press the mentioned combination. If you are not sure that you are in a frame, or just want to check the top document's source, and then press Ctrl+Shift+F9. Ctrl+Alt+F9 [+Shift works too] will make an Ajax request (I think there is no better method for this) to get the original source.
“Source” is available for Opera only. Try it here

Opera: Download Here

Labels:

Google Dictionary: Lookup Definitions Instantly

Posted by sheraz
February 24, 2011
comments (0)

 
If you want to get the meaning of any word on the internet quickly and easily with just a single click then chrome makes your work simple by offering you its plug-in called “Google Dictionary”.
Once installed, “Google Dictionary” icon will be placed in the chrome address bar.
Now all you have to do is just double click any word and a pop up will be displayed containing its definition.


You can get more definitions, web definitions and history by clicking the “Google Dictionary” icon which will display a drop down.

Google Dictionary supports a number of different languages. You can configure the default dictionary language by configuring its options. Dictionary configuration can be accessed by clicking the “Extension options”.

This extension is extremely useful and efficient to find reference information for words while browsing. If you are always looking for definitions then you might want to add this extension to your browser. Try “Google Dictionary” here.

Chrome:  Download Here
Firefox: Download Here

Labels: ,

Google Sidewiki: Contribute helpful information to any webpage

Posted by sheraz
February 20, 2011
comments (0)

Google sidewiki is a new step to make your web browser social. With Google sidewiki you can share any useful information about any web page you visit with the sidewiki community. Google calls these comments sidewiki. Users can post their opinions to the discussions about specific web pages. With its help you can learn from others, review the expert’s insights about the issues and get good tips from the users who have visited the page before you.
Once installed, Google sidewiki icon will be displayed in the address bar.

When you will visit any page, sidewiki icon will display the number of sidewiki posted regarding that web page. Clicking on that icon will show you a drop down containing user’s sidewiki.

Now, if you want to share your opinion then scroll down to the bottom of drop down. There you will find sidewiki editor where you can write your own comments. Just write your comments and publish it.


You can find more information about Google sidewiki at there. To know how it works, please watch this tutorial

Google sidewiki extension is available for Google chrome and Firefox. Try it here

Chrome:  Download Here
Firefox: Download Here

Labels: ,

Subscribe to: Posts (Atom)