Browser Source Mapping via Metadata Tables

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Web developers face inefficiencies in identifying and modifying specific files within a web site, as existing technologies lack an automated method to map browser selections back to their corresponding source code files, leading to uncertainty about the effects of changes on rendered web pages.

Innovation Solution

The solution involves creating associations between browser selections and source code files by generating metadata during HTML code generation, which is used to create a mapping table that maps location ranges in fetched files to their corresponding source files, allowing for direct access and modification of source code elements within an integrated development environment (IDE).

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Productivity

If web developers manually track and identify source code files corresponding to browser elements, then they can modify the code, but the process is time-consuming and error-prone due to the complex multi-file nature of web sites

Engineering Contradiction:

Improveweb development efficiencyVSAvoidtime to identify and modify source code

Core Design Contradiction:

ProductivityVSLoss of time

Solution Approach 1:

The patent introduces a mapping table as an intermediary data structure that stores the correspondence between browser element locations and source code file locations. This mapping table acts as a mediator that automatically translates browser selections into source code locations, eliminating the need for manual tracking and significantly improving development efficiency while reducing time loss.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent creates a virtual copy of the web site structure in the form of a mapping table that mirrors the relationship between browser elements and source code. This virtual model allows developers to work with simplified representations rather than directly navigating the complex actual file structure, thereby improving productivity and reducing the time required to locate and modify source code.

Inventive Principle:

Principle #26Copying

2Ease of operation

If web developers guess at the effect of code changes before server processing, then they can proceed with modifications, but they cannot know the actual rendered output until after server processing and browser display

Engineering Contradiction:

Improvecode modification processVSAvoidinformation about rendered output

Core Design Contradiction:

Ease of operationVSLoss of information

Solution Approach 1:

The patent implements a feedback mechanism where the mapping table provides real-time information about how source code changes will affect the rendered web page. By storing and utilizing the correspondence between source code locations and browser element locations, developers can immediately see the expected output of their modifications without waiting for server processing, thus improving ease of operation while preventing loss of information about the rendered output.

Inventive Principle:

Principle #23Feedback

3Adaptability or versatility

If scripting languages dynamically modify HTML documents in the browser, then interactive functionality is added, but the mapping between browser elements and original source code becomes unpredictable

Engineering Contradiction:

Improveinteractive functionalityVSAvoidmapping accuracy between browser and source code

Core Design Contradiction:

Adaptability or versatilityVSMeasurement precision

Solution Approach 1:

The patent performs preliminary action by creating the mapping table before scripting languages dynamically modify the HTML document. The mapping table is generated during server-side processing, establishing the correspondence between source code locations and browser element locations before any client-side scripting occurs. This preliminary mapping allows the system to track and maintain accuracy even as scripting languages dynamically change the document structure, thus preserving measurement precision while maintaining adaptability for interactive functionality.

Inventive Principle:

Principle #10Preliminary action

Data Source

PatentEP2721513B1Live browser tooling in an integrated development environment

Publication Date: 2020.10.07 MICROSOFT TECHNOLOGY LICENSING LLC

Figure 1
Figure 2a
Figure 2b

AI summary

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.