Reuse Firebug JavaScript library to visualize HTML source code

This project received 1 bids from talented freelancers with an average bid price of $206 USD.

Get free quotes for a project like this
Project Budget
$10 - $30 USD
Total Bids
Project Description

Firefox extension Firebug ([url removed, login to view]) has a very nice HTML inspecting library. The code is reused in Firebug Lite ([url removed, login to view]) tool, which can inject HTML inspecting console (html+js) into any web page on any web browser.

I want you to reuse the same code and make a new JavaScript library that would have the following capabilities:

1) it can be loaded into a web page as JavasScript files

2) given an ID of <div> element in a web page and HTML code as a string it would format the HTML code, place it into the <div> element, and let to browser the code exactly as it is done in Firebug Lite HTML inspecting window.

3) browsing the HTML code inside <div> should look like and behave exactly as it is while browsing code in Firebug Lite

4) there would be an option to hook on click and right click events

5) once clicked inside HTML inspecting DIV, the selected code would appear in a separate <textarea> tag.

6) every line of reused code must be marked( commented) as reused with reference to original source files in firebuglite library

7) if needed the jQuery library can be used.

an initialization of the library could look anything similar to:


var myInspector = new FireBugLiteInspector (id_of_a_div, "<html><body><div>my page to be inspected</div></body><html>");

[url removed, login to view](function(selected_code,lineNumber) {




I have attached a screenshot depicting how the div with HTML code should look like ([url removed, login to view])

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online