Live browser tooling in an integrated development environment

• US 9,753,699 B2
• Filed: 06/16/2011
• Issued: 09/05/2017
• Est. Priority Date: 06/16/2011
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Inventors: Chartier, Daniel P., Davis, Joseph M., Gabuardi Gonzalez, Jorge E., Joshi, Vishal R., Harder, Michael J., Bach, Michael, Phan, Anh Thi-Phuong, Mangalore, Reshmi, Jung, Jon E.
• Primary Examiner(s): Dam, Tuan Q.
• Assistant Examiner(s): Wei, Zheng
• Application Number:
  US13/161,529
• Publication Number:
  US 20120324422A1
• Time in Patent Office: 2,273 Days
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 8/33 Intelligent editors
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06F 8/355 Round-trip engineering
• CPC Class Codes: G06F 8/75 Structural analysis for program understanding
• CPC Class Codes: G06F 9/45529 Embedded in an application, e.g. JavaScript in a Web browser

Abstract

A selection in a browser can be mapped back to a corresponding location range in one or more source files that generated the selection. A selection in a source file can be mapped to the corresponding location range in the browser'"'"'s DOM. The selection in the browser can be mapped to a location range in a block list generated from the DOM. The location range in the DOM'"'"'s block list can be mapped to a corresponding location range in a block list generated from the fetched file received from a web server. The location range in the fetched file'"'"'s block list can be mapped to a particular location in the particular source file responsible for generating the selection in the browser. The selection in the browser and the source file can be displayed concurrently, the source file scrolled to the location range corresponding to the selection in the browser.

Claims

1. A system comprising:

at least one processor of a computing device;

a memory of the computing device; and

at least one module loaded into the memory causing the at least one processor to;

map a selection in a browser to a portion in a document object model (DOM) corresponding to the selection, the DOM representing a fetched file obtained from a web server in response to an hypertext transfer protocol (HTTP) request, the selection associated with content from the fetched file, the fetched file differs from the DOM;

map the portion in the DOM to a location range in a source file that generated the content in the fetched file;

receive updated content from the web server based on alterations made to the source file; and

display the selection in the browser concurrently with the altered source file,

wherein the displayed selection in the browser includes the updated content.

2. The system of claim 1, wherein the at least one processor receives metadata that maps a location range in the fetched file to a particular location range in a particular source file, the metadata comprising a path for the particular source file and a start location in the particular source file.

3. The system of claim 2, wherein the at least one module generates a mapping table from the received metadata, the mapping table mapping location ranges in the fetched file to location ranges in a source file.

4. The system of claim 1, wherein the at least one module further comprises:

map the selection in the DOM to a location range in a dynamic browser file block list;

map the location range in the dynamic browser file block list to a location range in a fetched file block list; and

map the location range in the fetched file block list to a corresponding location range in a source file that generated the selection in the DOM.

5. The system of claim 1, wherein a document object model tool provides a visualization of a tree data structure that represents a browser page, the browser page displayed in the browser.

6. The system of claim 1, wherein a Cascading Style Sheet tool maps a selected style characteristic back to a corresponding source file that originated the characteristic.

7. The system of claim 6, wherein a change to the selected style characteristic can be automatically made permanent by changing the corresponding source file.

8. A method comprising:

receiving by a processor of a software development computer from a web server, a user selection in a browser;

mapping the selection in the browser to a portion in a document object model (DOM) representing the selection;

mapping the portion in the DOM to a location range in a fetched file, the fetched file comprising a file received from a web server in response to an hypertext transfer protocol (HTTP) request, the DOM representing the fetched file, the DOM differs from the fetched file; and

mapping the location range in the fetched file to a location range in a source file that generated the user selection in the browser;

receiving updated content from the web server based on an altered source file; and

displaying the selection in the browser concurrently with the location range in the altered source file,

wherein the displayed selection in the dynamic browser file includes the updated content.

9. The method of claim 8, further comprising:

receiving metadata mapping location ranges in the fetched file to a corresponding location range in a source file that originated content at the location range in the fetched file, the metadata comprising a path to the source file and the corresponding location range within the source file corresponding to the location range in the fetched file.

10. The method of claim 9, further comprising:

generating a mapping table in memory of the software development computer, the mapping table mapping content in a browser to corresponding content in the fetched file by creating associations between the fetched file and the DOM.

11. The method of claim 10, further comprising:

generating server content by sending a request to the web server to generate the server content and displaying the server content in the browser.

12. The method of claim 9, further comprising:

generating a mapping table that maps the location range in the fetched file to the corresponding location range in the source file from which content at the location range in the fetched file was generated; and

displaying a browser display and corresponding source code.

13. The method of claim 8, further comprising:

displaying a tree data structure that represents a browser page, the browser page displayed in a browser.

14. The method of claim 8, further comprising:

mapping a selection comprising a Cascading Style Sheet style characteristic back to a source file that originated the Cascading Style Sheet style characteristic.

15. A device, comprising:

at least one processor and a memory;

the at least one processor configured to;

receive a selection in a browser;

map the selection in the browser to a location range in a document object model (DOM) block list;

map the location range in the DOM block list to a location range in a fetched file block list, a fetched file comprising a file received from a web server in response to a hypertext transfer protocol (HTTP) request, the DOM differs from the fetched file;

map the location range in the fetched file block list to a corresponding location range in a source file that generated the selection in the browser;

receive updated content from the web server based upon the web server processing one or more user alterations made to the source file; and

display concurrently the selection in the browser and the source file,

wherein the displayed selection includes the updated content.

16. The device of claim 15, wherein the at least one processor is further configured to:

render content in the browser comprising a production web server'"'"'s response by executing a round trip to the production web server.

17. The device of claim 16, wherein the at least one processor is further configured to:

generate associations mapping the selection in the DOM to a location range in the DOM block list by matching identifiers in a first block list generated from the DOM and a second block list generated from the fetched file.

18. The device of claim 15, wherein the at least one processor is further configured to:

receive the fetched file from a web server, the fetched file associated with metadata that maps output location ranges in the fetched file to location ranges in source files that originate the output location ranges in the fetched file.

19. The device of claim 18, wherein the at least one processor is further configured to:

map a selection comprising a Cascading Style Sheet style characteristic back to a source file that originated the Cascading Style Sheet style characteristic.

20. The device of claim 15, wherein the at least one processor is further configured to:

provide a visualization of a tree data structure that represents a browser page, the browser page displayed in a browser.