Method for locating source code original file path in browser

Abstract

The invention discloses a method for positioning a source code original file path in a browser. The positioning method comprises the following steps: inputting information at a front end; performing source code mapping according to the input information to obtain a mapping result; and displaying and rendering the mapping result, and performing user interaction. Source codes are quickly positioned, and enterprise development efficiency is improved; sourceMap mapping is carried out, and VLQ coding is ingeniously used.

Description

Technical Field

[0001] The present invention relates to the field of modern front-end development, and in particular to a method for locating a source code original file path in a browser. Background Art

[0002] In modern front-end development, frameworks such as Vue and tools such as Webpack have become mainstream. As the scale of projects continues to expand, developers are faced with increasingly complex code structure and file management issues. Especially in the debugging and maintenance process, it has become particularly complex and cumbersome to quickly locate the source code files of specific functional modules through the browser. Often, when changing a certain function, it is necessary to constantly locate the source code from the source code. Modifying the function is simple, but locating the source code location is complex and time-consuming. In the face of this problem, through research and own technical knowledge reserves, it is decided to invent a plug-in to realize the function of quickly locating the source code. Relying on the browser platform, the browser is used to interact with the user and the source code in a friendly manner. The sourceMap file structure is used in the source code for file path mapping, and the file path search algorithm is used for file search. The mapping layer uses VLQ (Variable Length Quantity) for encoding. This encoding format can efficiently represent the mapping relationship between different locations. At the same time, by using the existing Webpack packaging technology to configure the sourceMap, Vue and other front-end frameworks can effectively realize source code location. . Summary of the invention

[0003] In view of the above problems, the present invention is proposed to provide a method for locating the path of the original file of the source code in the browser, which overcomes the above problems or at least partially solves the above problems.

[0004] According to one aspect of the present invention, a method for locating the path of a source code original file in a browser is provided, the locating method comprising:

[0005] Front-end input information;

[0006] Perform source code mapping according to input information to obtain mapping results;

[0007] The mapping results are displayed and rendered for user interaction.

[0008] Optionally, the front-end input information specifically includes:

[0009] When the user presses the shortcut key, the event logic is triggered through the KeyboardEvent event set in the program.

[0010] Optionally, performing source code mapping according to the input information to obtain a mapping result specifically includes:

[0011] When packaging the project, the source code path reverse search algorithm is relied upon to match the path to the current page.

[0012] Optionally, displaying and rendering the mapping result and performing user interaction specifically includes: implementing path search, feeding back browser rendering, and performing user interaction.

[0013] Optionally, the method for generating a source code mapping file specifically includes:

[0014] By inputting the original source file sourceFile[], the compressed file compressed_code and the source code map file source_map are output to obfuscate the source code;

[0015] Obfuscate the source code and use custom manual obfuscation logic to obfuscate the code.

[0016] Optionally, the code file of the compressed file includes:

[0017] Analyze input files;

[0018] Apply VLQ coding;

[0019] Output compressed data, decompress data for decoding.

[0020] Optionally, the analysis input file specifically includes:

[0021] Read the contents of a file, usually in the form of a byte stream;

[0022] Perform appropriate preprocessing on the data, converting each byte or number in the file into an unsigned integer;

[0023] Select to split the file data into multiple data blocks for encoding and compression, and encode the entire file as a data stream.

[0024] Optionally, the applying VLQ encoding specifically includes:

[0025] The core of VLQ encoding is to convert an integer into multiple 7-bit data blocks. The specific process includes:

[0026] Get numbers: extract the integers to be encoded from the file;

[0027] Coding process:

[0028] For each integer, repeat the following steps:

[0029] Get the lower 7 bits of the integer;

[0030] Shift the remaining part right by 7 bits, that is, number>>=7;

[0031] Concatenate the obtained 7-bit data and flag bit into one byte:

[0032] If the remaining part still has number>0, set the highest bit of the byte to 1;

[0033] Otherwise, set the highest bit of the byte to 0, indicating the end of encoding;

[0034] Save or write the encoded bytes to a compressed file;

[0035] Repeat until all numbers have been encoded.

[0036] Optionally, the outputting compressed data and decompressing the data for decoding specifically includes:

[0037] After VLQ encoding, the compressed data is usually stored as a series of bytes, or written to a compressed file;

[0038] The final compressed file will contain VLQ-encoded data instead of the original numbers;

[0039] Decompress and read data from compressed files;

[0040] Convert the byte stream back to the original integer by reversing the operation.

[0041] Optionally, the method for generating a source code mapping file further includes:

[0042] The structure of a source map file typically consists of:

[0043] version: source map version number;

[0044] file: target file path, that is, the compressed or translated file path;

[0045] sources: an array listing the paths of source files;

[0046] names: an array listing the symbol names in the source code;

[0047] mappings: A string describing the mapping between source code and target code, using VLQ encoding. In source mapping, numbers are stored using VLQ encoding, allowing multiple numbers to be compressed into one string.

[0048] The present invention provides a method for locating the path of the original source code file in a browser, the locating method comprising: inputting information at the front end; mapping the source code according to the input information to obtain a mapping result; displaying and rendering the mapping result to interact with the user. Rapidly locate the source code to enable enterprise development efficiency; sourceMap mapping, skillfully use VLQ encoding.

[0049] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0051] Figure 1 A flowchart of a method for locating the path of a source code original file in a browser provided by an embodiment of the present invention;

[0052] Figure 2 A flow chart of a source code mapping file generation algorithm provided by an embodiment of the present invention;

[0053] Figure 3 A flowchart of the principle of compressing code files provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0054] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0055] The terms "comprises" and "having" and any variations thereof in the description embodiments, claims and drawings of the present invention are intended to cover non-exclusive inclusions, for example, including a series of steps or units.

[0056] The technical solution of the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments.

[0057] The present invention comprises three modules: front-end quick input, source code mapping and display rendering, and realizes the browser direct customized code path display function.

[0058] like Figure 1 As shown, a method for locating the path of the original source code file in a browser includes:

[0059] When the user uses the shortcut key, the event logic is triggered through the KeyboardEvent event set in the program. When the project is packaged, the source code path reverse search algorithm is relied on to match the path of the current page, realize the path search, feedback the browser rendering, and perform user interaction. The focus of the present invention is on source code mapping (i.e. sourceMap design).

[0060] 1. Source code mapping file generation algorithm

[0061] By inputting the original source file sourceFile[], the compressed file compressed_code and the source code mapping file source_map are output to obfuscate the source code. First, the source code is obfuscated and the code is obfuscated using custom manual obfuscation logic to prevent code theft and other unsafe factors. At the same time, due to custom logic, manual logic modification is more necessary, such as adding encryption algorithms to deal with complex scenarios, such as Figure 2 shown.

[0062] 2. The principle of compressing code files, such as Figure 3 shown.

[0063] a. Analyze the input file

[0064] Read the contents of a file, usually reading data in the form of a byte stream.

[0065] Perform appropriate preprocessing on the data, such as converting each byte or number in the file to an unsigned integer, to ensure that they are suitable for encoding with VLQ.

[0066] You can choose to split the file data into multiple data blocks for encoding and compression, or you can encode the entire file as a data stream.

[0067] b. Apply VLQ coding

[0068] The core of VLQ encoding is to convert an integer into multiple 7-bit data blocks. The specific process is as follows:

[0069] Get Numbers: Extract the integers to be encoded from the file. Usually this is each byte, word, or integer in the file.

[0070] Coding process:

[0071] For each integer, repeat the following steps:

[0072] Get the lower 7 bits of the integer (that is, number & 0x7F, where 0x7F is a 7-bit mask).

[0073] Shift the remaining part right by 7 bits, that is, number>>=7.

[0074] Concatenate the obtained 7-bit data and flag bit (the upper 7 bits are data, and the lower 1 bit indicates whether there are more bytes) into one byte:

[0075] If the remainder still exists (number>0), set the highest bit of the byte to 1.

[0076] Otherwise, the highest bit of the byte is set to 0, indicating the end of encoding.

[0077] Save or write the encoded bytes to a compressed file.

[0078] Repeat the above steps until all numbers have been encoded.

[0079] c. Output compressed data

[0080] After VLQ encoding is complete, the compressed data is typically stored as a series of bytes (smaller than the original data), or it can be written to a compressed file.

[0081] The final compressed file will contain VLQ-encoded data instead of the original numbers.

[0082] d. Decompression (decoding)

[0083] Read data from a compressed file.

[0084] The byte stream is converted back to the original integer through the reverse operation. Specifically, for each byte, the lower 7 bits are taken and accumulated into the final integer, and the flag of the highest bit is used to determine whether there are subsequent bytes.

[0085] 3. Create a mapping file structure to generate the corresponding string

[0086] The structure of a source map file usually includes the following main fields:

[0087] version: The source map version number.

[0088] file: target file path, that is, the compressed or translated file path.

[0089] sources: An array listing the paths to the source files.

[0090] names: An array listing the symbolic names in the source code (such as variable names, function names, etc.).

[0091] Mappings: A string that describes the mapping relationship between source code and target code. It uses VLQ (Variable-Length Quantity) encoding. In source mapping, numbers are stored using VLQ encoding, allowing multiple numbers to be compressed into a string. Each character in the VLQ encoding represents a number and is encoded according to certain rules. This encoding method supports the use of 64 characters to represent numbers. Specifically, it contains five parts: source file index, source file line number, source file column number, target file line number, and target file column number, as follows.

[0092] Source file index: indicates the location of the source file, the index of the source file in the sources array.

[0093] Source file line number: The line number in the source code (counting starts from 0).

[0094] Source file column number: The column number in the source code (counting starts from 0).

[0095] Object file line number: The line number in the object code (usually compressed or translated code).

[0096] Object file column number: The column number in the object code.

[0097] Let's take an example to illustrate the above principle. For example, there is the following code

[0098] source code

[0099]

[0100] After mapping

[0101]

[0102] Among them, version represents the version number, which is defined to start from 0 and increment each time the code is modified. Step is 1. File is the path name of the obfuscated file. Sources is the source file. Multiple sources can correspond to one file, which can be divided according to the actual situation. The names array stores all identifiers that appear in the source code (such as function names and variable names). In this example, greet, name, console, and log are all names in the source code. They are mapped in the mapping. The mappings field is mapped to the source file through VLQ encoding, such as AAEA.

[0103] Step 1: Convert AAEA to numbers

[0104] By finding the position of the character in the character set, we get the following numbers:

[0105] A->0

[0106] A->0

[0107] E->4

[0108] A->0

[0109] This means that the VLQ code of AAEA represents the numbers 0,0,4,0.

[0110] Step 2: Decode into a map

[0111] Each number in the VLQ encoding corresponds to a different part of the source file. We decode these numbers according to the rules of the source map.

[0112] Source file index: The first number 0 indicates that the mapping relationship corresponds to the 0th file of the source file (the first file in the sources array). The file here is the source code file.

[0113] Source code line number: The second number 0 indicates line 0 in the source code.

[0114] Source code column number: The third number 4 indicates the 4th column in the source code.

[0115] Object code line number: The fourth digit 0 indicates line 0 in the object code.

[0116] Object code column number: The fifth digit 0 indicates the 0th column in the object code.

[0117] Therefore, through decoding, we can conclude that the mapping represented by AAEA means:

[0118] Source file: The first source file in the sources array (usually the source code file).

[0119] Source code location: line 0, column 4 of the source file.

[0120] Target code location: line 0, column 0 of the target code.

[0121] Beneficial effects: 1. Use automatic generation of mapping to solve the problem that most existing solutions rely on manual configuration or search by developers, which is inefficient:

[0122] 2. Real-time query support: This plug-in allows developers to query the source code path corresponding to the current page in real time through the set shortcut keys;

[0123] 3. Focus on the front-end framework: The plug-in is designed specifically for Vue projects, is highly targeted, and can identify project-specific structures and file types

[0124] 4. Simplified configuration and usage: The plug-in can be used with simple configuration, and developers do not need to understand the details of complex Webpack configuration or other plug-ins.

[0125] 5. Generate readable output format: The mapping results are stored in JSON format, which is convenient for subsequent reference and analysis, and is also easy to integrate into other tools or workflows.

[0126] 6. Enhanced development experience: By integrating mapping information, developers can focus more on business logic without spending too much time on file paths, improving overall development efficiency.

[0127] 7. Flexibility and scalability: Built on Webpack, it can be easily combined with other Webpack plug-ins and functions to provide higher flexibility.

[0128] The above specific implementation methods further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for locating the path of a source code original file in a browser, characterized in that: The positioning method comprises: Front-end input information; Perform source code mapping according to input information to obtain mapping results; The mapping results are displayed and rendered for user interaction.

2. A method for locating the path of a source code original file in a browser according to claim 1, characterized in that: The front-end input information specifically includes: When the user presses the shortcut key, the event logic is triggered through the KeyboardEvent event set in the program.

3. A method for locating the path of a source code original file in a browser according to claim 1, characterized in that: The performing source code mapping according to the input information to obtain the mapping result specifically includes: When packaging the project, the source code path reverse search algorithm is relied upon to match the path to the current page.

4. A method for locating the path of a source code original file in a browser according to claim 1, characterized in that: The presenting and rendering of the mapping result and performing user interaction specifically include: implementing path search, feeding back browser rendering, and performing user interaction.

5. The method for locating the path of the original source code file in a browser according to claim 1, characterized in that: The method for generating a file of source code mapping specifically includes: By inputting the original source file sourceFile[], the compressed file compressed_code and the source code map file source_map are output to obfuscate the source code; Obfuscate the source code and use custom manual obfuscation logic to obfuscate the code.

6. A method for locating the path of a source code original file in a browser according to claim 1, characterized in that: The code file of the compressed file includes: Analyze input files; Apply VLQ coding; Output compressed data, decompress data for decoding.

7. A method for locating the path of a source code original file in a browser according to claim 6, characterized in that: The analysis input file specifically includes: Read the contents of a file, usually in the form of a byte stream; Perform appropriate preprocessing on the data, converting each byte or number in the file into an unsigned integer; Select to split the file data into multiple data blocks for encoding and compression, and encode the entire file as a data stream.

8. A method for locating the path of a source code original file in a browser according to claim 6, characterized in that: The application of VLQ coding specifically includes: The core of VLQ encoding is to convert an integer into multiple 7-bit data blocks. The specific process includes: Get numbers: extract the integers to be encoded from the file; Coding process: For each integer, repeat the following steps: Get the lower 7 bits of the integer; Shift the remaining part right by 7 bits, number>>=7; Concatenate the obtained 7-bit data and flag bit into one byte: If the remaining part still has number>0, set the highest bit of the byte to 1; Otherwise, set the highest bit of the byte to 0, indicating the end of encoding; Save or write the encoded bytes to a compressed file; Repeat until all numbers have been encoded.

9. A method for locating the path of a source code original file in a browser according to claim 6, characterized in that: The outputting compressed data and decompressing the data for decoding specifically include: After VLQ encoding, the compressed data is usually stored as a series of bytes, or written to a compressed file; The final compressed file will contain VLQ-encoded data instead of the original numbers; Decompress and read data from compressed files; Convert the byte stream back to the original integer by reversing the operation.

10. The method for locating the path of the original source code file in a browser according to claim 1, characterized in that: The method for generating a source code mapping file further includes: The structure of a source map file typically consists of: version: source map version number; file: target file path, that is, the compressed or translated file path; sources: an array listing the paths of source files; names: an array listing the symbol names in the source code; mappings: A string describing the mapping between source code and target code, using VLQ encoding. In source mapping, numbers are stored using VLQ encoding, allowing multiple numbers to be compressed into one string.

Images