Linking source code to running element

A computer readable non-transitory storage medium storing computer executable instructions for controlling a computing device to perform a method comprising:

• selecting, within a web development tool, a browser from a plurality of browsers on which to base the construction of a Document Object Model (DOM);
• opening a markup text source document comprising original source code prior to being parsed in a source code editor;
• constructing a document node tree from the markup text source document such that each node of the document node tree includes a text offset and markup text source document details, the text offset in each node of the document node tree indicating a location of associated original source code within the markup text source document corresponding to the node of the document node tree;
• constructing, from the document node tree, a DOM based on the selected browser and a view node tree that represents the DOM, the constructing of the view node tree including mapping the view node tree to the document node tree;
• and
• representing the DOM in the browser such that each DOM element is linked to the associated original source code associated with the DOM element, the link provided via the view node tree and the text offsets in the document node tree,
• wherein the text offset for each node of the document node tree includes a line number and position within the line or a character number that indicates the position of a character relative to the beginning of the markup text source document, and
• wherein by highlighting a DOM element in the browser, the original source code of the markup text source document associated with the highlighted DOM element is highlighted in the source code editor.

A computer readable non-transitory storage medium storing a development tool including computer executable instructions for controlling a computing device, the development tool configured to perform a method comprising:

• providing a source code editor for editing a markup text source document comprising original source code prior to being parsed;
• selecting, within the development tool, a browser from a plurality of browsers on which to base the construction of a Document Object Model (DOM);
• constructing a document node tree from the markup text source document via a markup text parser such that each node of the document node tree includes a text offset and source document details, the text offset in each node of the document node tree indicating a location of associated original source code within the markup text source document corresponding to the node of the document node tree;
• and
• constructing, from the document node tree, a DOM based on the selected browser and a view node tree that represents the DOM, the view node tree mapped to the document node tree such that by selecting a DOM element in the browser, the original source code of the markup text source document associated with the selected DOM element is selected in the source code editor and such that by selecting original source code in the source code editor, the DOM element associated with the selected original source code is selected in the browser,
• wherein the text offset for each node of the document node tree includes a line number and position within the line or a character number that indicates the position of a character relative to the beginning of the markup text source document.