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

0 comments:

Post a Comment