Compatibility detection method and device for front-end source code, equipment and storage medium

Abstract

The invention discloses a front-end source code compatibility detection method and device, equipment and a storage medium, and the method comprises the steps: matching a front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code is matched with any first compatibility verification rule, determining whether the front-end source code is matched with any first compatibility verification rule; taking the first compatibility verification rule matched with the front-end source code as a candidate compatibility verification rule; in the candidate compatibility verification rules, obtaining a to-be-verified compatibility verification rule of which the confidence coefficient is smaller than a preset confidence coefficient threshold value, and positioning a problem code matched with the to-be-verified compatibility verification rule in the front-end source code; according to the method and the device, the problem code is acquired, the second compatibility verification rule corresponding to the problem code is acquired, and the compatibility between the problem code and each preset browser is determined according to the front-end source code, the problem code and the second compatibility verification rule through the pre-constructed text language large model, so that the compatibility detection on the front-end source code can be quickly and accurately realized.

Description

Technical Field

[0001] The present invention relates to the field of code detection technology, and in particular to a compatibility detection method, device, equipment and storage medium for front-end source code. Background Art

[0002] Currently, in order to ensure that web pages or applications can be displayed and run normally on different browsers, it is usually necessary to perform compatibility testing on the front-end code.

[0003] In the prior art, front-end code compatibility testing is typically performed through manual code walkthroughs or black-box testing. Specifically, developers can review the front-end code line by line and, based on their experience and knowledge, determine its compatibility across different browsers. Alternatively, the front-end code can be deployed and run in different browser environments, with the compatibility of the code across different browsers determined based on the performance.

[0004] However, manual code walkthroughs rely entirely on the developer's personal experience and knowledge, consuming significant time and effort, and are prone to omissions and misjudgments. Therefore, compatibility testing for front-end code using manual code walkthroughs is both inefficient and inaccurate. Secondly, black-box testing, which requires repeatedly running front-end code in multiple browser environments, is a cumbersome process and only identifies existing compatibility issues. Therefore, compatibility testing for front-end code using black-box testing is also inefficient and inaccurate. Summary of the Invention

[0005] The present invention provides a compatibility detection method, device, equipment and storage medium for front-end source code, which can realize rapid and accurate compatibility detection of front-end source code.

[0006] In a first aspect, an embodiment of the present invention provides a method for detecting compatibility of a front-end source code, the method comprising:

[0007] Matching the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any first compatibility verification rule, using the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule;

[0008] From the candidate compatibility verification rules, obtain the compatibility verification rules to be verified whose confidence is less than a preset confidence threshold, and locate the problematic code that matches the compatibility verification rule to be verified in the front-end source code;

[0009] Obtain the second compatibility verification rule corresponding to the problem code, and determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rule through a pre-built text language large model.

[0010] In a second aspect, an embodiment of the present invention further provides a front-end source code compatibility detection device, the device comprising:

[0011] A first compatibility verification module is configured to match the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any of the first compatibility verification rules, use the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule;

[0012] A problem code location module is used to obtain, from candidate compatibility verification rules, a compatibility verification rule to be verified whose confidence level is less than a preset confidence threshold, and locate problem codes matching the compatibility verification rule to be verified in the front-end source code;

[0013] The second compatibility verification module is used to obtain the second compatibility verification rules corresponding to the problem code, and through a pre-built text language large model, determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rules.

[0014] In a third aspect, an embodiment of the present invention further provides an electronic device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the compatibility detection method of the front-end source code provided in any embodiment of the present invention.

[0015] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable a processor to implement the compatibility detection method of the front-end source code provided by any embodiment of the present invention when executed.

[0016] The technical solution provided by the embodiment of the present invention matches the front-end source code with multiple pre-defined first compatibility verification rules to obtain successfully matched candidate compatibility verification rules, and then uses the candidate compatibility verification rules with a confidence level less than a preset confidence threshold as the compatibility verification rules to be verified, and further verifies the problem codes corresponding to the compatibility verification rules to be verified through a large text language model in combination with the front-end source code, thereby avoiding the situation where manual code review or black box testing consumes a lot of manpower and material resources, and cannot conduct in-depth analysis of suspicious problem codes, resulting in the inability to quickly and accurately perform compatibility testing on the front-end source code. Therefore, it is possible to quickly and accurately perform compatibility testing on the front-end source code.

[0017] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present invention, nor is it intended to limit the scope of the present invention. Other features of the present invention will become readily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0019] Figure 1 This is a flowchart of a method for detecting compatibility of a front-end source code according to the first embodiment of the present invention;

[0020] Figure 2 This is a flowchart of another front-end source code compatibility detection method provided in accordance with the second embodiment of the present invention;

[0021] Figure 3 This is a general architecture diagram for describing a compatibility detection method for front-end source code according to an embodiment of the present invention;

[0022] Figure 4 This is a flow chart of a rule matching function module provided according to an embodiment of the present invention;

[0023] Figure 5 This is a flow chart of a secondary detection function module provided according to an embodiment of the present invention;

[0024] Figure 6 is a flow chart of a report integration function module provided according to an embodiment of the present invention;

[0025] Figure 7 2 is a schematic diagram of the structure of a front-end source code compatibility detection device provided according to the third embodiment of the present invention;

[0026] Figure 8 It is a structural diagram of an electronic device provided by the fourth embodiment of the present invention. DETAILED DESCRIPTION

[0027] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0028] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0029] Example 1

[0030] Figure 1 This is a flowchart of a front-end source code compatibility detection method provided according to Example 1 of the present invention. This embodiment is applicable to the situation where compatibility detection of front-end source code is performed. The method can be executed by a front-end source code compatibility detection device. The front-end source code compatibility detection device can be implemented in the form of hardware and / or software. The front-end source code compatibility detection device can be configured in an electronic device such as a computer.

[0031] like Figure 1 As shown, the present embodiment discloses a method for detecting compatibility of a front-end source code, including:

[0032] S110. Match the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any first compatibility verification rule, use the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule.

[0033] In this embodiment, the front-end source code can be understood as the original code file used to build the user interface of a website or application. The front-end source code may include various types of codes, such as Cascading Style Sheet (CSS) code, JavaScript (a programming language) code, and template code that comes with the development framework of the front-end source code. There can be many development frameworks for the front-end source code, such as the Progressive JavaScript Framework (vue framework) and the Cybernetically Enhanced Web Apps (Svelte) framework. The first compatibility verification rule can be used to detect whether the front-end source code contains syntax elements that are incompatible with the preset browser. Each first compatibility verification rule includes at least one incompatible syntax element.

[0034] In this step, specifically, the correspondence between the code type and the first compatibility verification rule can be obtained, and based on the correspondence between the code type and the first compatibility verification rule, different types of code in the front-end source code are matched with each corresponding first compatibility verification rule.

[0035] Then, when the front-end source code does not match any of the first compatibility verification rules, it can be considered that the front-end source code does not contain syntax elements that are incompatible with the preset browser. At this time, the compatibility test of the front-end source code can be ended, and a compatibility test report that the front-end source code is compatible with each preset browser can be output. When the front-end source code matches any of the first compatibility verification rules, it can be considered that the front-end source code contains syntax elements that are incompatible with the preset browser. At this time, the first compatibility verification rule that matches the front-end source code can be used as a candidate compatibility verification rule, and a compatibility test report can be output based on the candidate compatibility verification rule.

[0036] Optionally, before matching the front-end source code with a plurality of predefined first compatibility verification rules, the method further includes: obtaining incompatible syntax elements corresponding to respective preset browsers, and using a regular expression corresponding to each incompatible syntax element as the first compatibility verification rule. The incompatible syntax elements may be of various types, such as functions, properties, and syntax.

[0037] For example, if the incompatible syntax element is the grid-gap attribute, the following regular expression may be generated: / grid-gap\s*: / g. If the incompatible syntax element is Promise.allSettled(), the following regular expression may be generated: / Promise\.allSettled\s*$ / g.

[0038] The advantage of this setting is that by generating a regular expression corresponding to each incompatible syntax element and using the regular expression as the first compatibility verification rule, extremely complex text patterns can be matched through concise regular expressions, thereby improving the efficiency of generating the first compatibility verification rule and the efficiency of matching the front-end source code with the first compatibility verification rule.

[0039] S120. Obtain, from the candidate compatibility verification rules, a compatibility verification rule to be verified whose confidence level is less than a preset confidence threshold, and locate the problem code matching the compatibility verification rule to be verified in the front-end source code.

[0040] In this embodiment, the problem code can be understood as matching the compatibility check rule to be verified, but because the confidence of the compatibility check rule to be verified is less than the preset confidence threshold, its impact on the compatibility of the front-end source code cannot be clearly determined.

[0041] S130. Obtain a second compatibility verification rule corresponding to the problem code, and determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code, and the second compatibility verification rule through a pre-built text language large model.

[0042] In this embodiment, the second compatibility checking rule can be used to detect the compatibility between the problem code and each preset browser.

[0043] In this step, specifically, the purpose of the problem code can be determined based on the annotations in the problem code, and based on the purpose of the problem code, a second compatibility verification rule corresponding to the problem code can be obtained. The front-end source code, the line number of the problem code in the front-end source code, and the second compatibility verification rule can then be input into the text language macro model for processing to determine the compatibility between the problem code and each preset browser. The compatibility between the problem code and each preset browser can be high, medium, or low. Based on the compatibility between the problem code and each preset browser, the compatibility risk between the problem code and each preset browser can then be determined. If the compatibility between the problem code and each preset browser is high, the compatibility risk between the problem code and each preset browser is low; if the compatibility between the problem code and each preset browser is medium, the compatibility risk between the problem code and each preset browser is also medium; and if the compatibility between the problem code and each preset browser is low, the compatibility risk between the problem code and each preset browser is high. Finally, a compatibility test report can be generated based on the compatibility risk between the problem code and each preset browser, the problem code, and the second compatibility verification rule.

[0044] The advantage of this setting is that by inputting the front-end source code, the line number of the problem code in the front-end source code, and the second compatibility verification rule into the text language model, the text language model can learn the context dependency of the problem code, and then determine the compatibility between the problem code and each preset browser based on the matching result of the second compatibility verification rule and the problem code and its context dependency, thereby improving the accuracy of the compatibility detection results of the front-end source code.

[0045] The technical solution of this embodiment is to match the front-end source code with multiple pre-defined first compatibility verification rules, and when the front-end source code matches any first compatibility verification rule, use the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule; among the candidate compatibility verification rules, obtain the compatibility verification rule to be verified whose confidence is less than a preset confidence threshold, and locate the problem code that matches the compatibility verification rule to be verified in the front-end source code; obtain the second compatibility verification rule corresponding to the problem code, and through a pre-built text language large model, determine the compatibility between the problem code and each preset browser according to the front-end source code, the problem code and the second compatibility verification rule. This solves the problem that manual code review or black box testing consumes a lot of manpower and material resources, and cannot conduct in-depth analysis of suspicious problem codes, resulting in the inability to quickly and accurately perform compatibility testing on the front-end source code. This can achieve fast and accurate compatibility testing of the front-end source code.

[0046] Example 2

[0047] Figure 2 This is a flowchart of a front-end source code compatibility detection method provided according to Example 2 of the present invention. This embodiment is a further optimization and expansion based on the above embodiments, and can be combined with various optional technical solutions in the above implementation methods.

[0048] like Figure 2 As shown, the present embodiment discloses a method for detecting compatibility of a front-end source code, including:

[0049] S210: Acquire multiple code types corresponding to the front-end source code, and a set of rules corresponding to each code type.

[0050] Each code type may correspond to at least one rule set.

[0051] Specifically, in this step, after using the regular expression corresponding to each incompatible syntax element as a first compatibility verification rule, a rule set corresponding to each first compatibility verification rule can be determined based on the code type and function corresponding to each first compatibility verification rule. Then, the rule set can be obtained based on the code type corresponding to the front-end source code.

[0052] Exemplarily, assuming that the development framework corresponding to the front-end source code is the Vue framework, and the front-end source code includes CSS code, JavaScript code, and template code corresponding to the Vue framework, then at least one rule set corresponding to the CSS code, JavaScript code, and template code can be constructed. Among them, the rule set corresponding to the CSS code can be used to detect whether there are attributes or syntax in the CSS code that are incompatible with each preset browser. There can be two rule sets corresponding to the JavaScript code, one for detecting whether the JavaScript code uses an application programming interface (API) that is incompatible with any preset browser, and the other for detecting whether the JavaScript code uses features that are not supported by any preset browser. The rule set corresponding to the template code can be used to detect whether the template code uses instructions that are not supported by the Vue framework or are risky.

[0053] Furthermore, a rule set corresponding to the CSS code can be constructed through the following example: Assuming that the first browser does not support the grid-gap attribute in the CSS code, the incompatible syntax element can be considered to be grid-gap, and / grid-gap\s*: / g can be generated. Assuming that the second browser released before the preset version does not support the aspect-ratio abbreviation, the incompatible syntax element can be considered to be aspect-ratio, and / aspect-ratio\s*: / g can be generated. Assuming that the first browser released before the preset version does not support the gap attribute, the incompatible syntax element can be considered to be gap, and / gap\s*: / g can be generated. Assuming that the first browser does not support the calc() complex expression in the CSS code, the incompatible syntax element can be considered to be calc(), and / calc$[^()]+\s*[\+\-\*\ / ]\s*[^()]+$ / g can be generated. Then, you can add the four regular expressions / grid-gap\s*: / g, / aspect-ratio\s*: / g, / gap\s*: / g, and / calc$[^()]+\s*[\+\-\*\ / ]\s*[^()]+$ / g to the rule set corresponding to the CSS code.

[0054] The following example constructs a rule set for detecting incompatible APIs in JavaScript code: Assuming that the first browser does not support Promise.allSettled() in the JavaScript code, / Promise\.allSettled\s*$ / g can be generated. Assuming that the second browser released before the preset version does not support Intl.RelativeTimeFormat, / Intl\.Rel ativeTimeFormat\s*\( / g can be generated. Then, the two regular expressions / Promise\.allSettled\s*$ / g and / Intl\.RelativeTimeFormat\s*\( / g can be added to the rule set for detecting incompatible APIs in JavaScript code.

[0055] A rule set for detecting incompatible features in JavaScript code is constructed through the following example: Assuming that the first browser does not support classList.toggle() with parameters in JavaScript code, classList.toggle() can be used as an incompatible syntax element and generated as / \.classList\.toggle\s*$\s*['"][^'"]+['"]\s*,\s*(true|false)\s*$ / g. Then, / \.classList\.toggle\s*$\s*['"][^'"]+['"]\s*,\s*(true|false)\s*$ / g can be added to the rule set for detecting incompatible features in JavaScript code.

[0056] Construct a rule set corresponding to the template code through the following example: Assuming that the Vue framework does not support dynamic splicing of v-html, you can use v-html as an incompatible syntax element and generate / v-htm l\s*=\s*["']\s*\$\{[^}]+\}\s*["'] / g. Assuming that the Vue framework does not support v-for and v-if at the same level, you can use v-for and v-if as incompatible syntax elements and generate / <[^>]*v-for[^>]*v-if / gi. Then, you can add the two regular expressions / v-html\s*=\s*["']\s*\$\{[^}]+\}\s*["'] / g and / <[^>]*v-for[^>]*v-if / gi to the rule set for detecting incompatible features in JavaScript code.

[0057] S220: Match different types of code in the front-end source code with each first compatibility verification rule in the corresponding rule set.

[0058] S230. When the front-end source code matches any first compatibility verification rule, the first compatibility verification rule that matches the front-end source code is used as a candidate compatibility verification rule.

[0059] Continuing with the previous example, if the front-end source code matches / grid-gap\s*: / g, / gap\s*: / g, / Promise\.allSettled\s*$ / g, and / <[^>]*v-for[^>]*v-if / gi, then / grid-gap\s*: / g, / gap\s*: / g, / Promise\.allSettled\s*$ / g, and / <[^>]*v-for[^>]*v-if / gi will be used as candidate compatibility verification rules.

[0060] Optionally, after taking the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule, it also includes: obtaining the problem code lines and compatibility risk levels corresponding to the candidate compatibility verification rule, and generating an initial compatibility detection report based on the candidate compatibility verification rule, and the problem code lines and compatibility risk levels corresponding to the candidate compatibility verification rule.

[0061] Specifically, an initial compatibility test report can be generated based on the unique identifier of the candidate compatibility verification rule, the problematic code line corresponding to the candidate compatibility verification rule, the compatibility risk level, and the recommended solution. The compatibility risk level can be used to reflect the compatibility risk of the problematic code matching the candidate compatibility verification rule.

[0062] The advantage of this setting is that by generating an initial compatibility test report, the compatibility risks in the front-end source code can be intuitively displayed to the user, providing a basis for timely processing of problematic codes that match the candidate compatibility verification rules.

[0063] S240. Obtain, from the candidate compatibility verification rules, a compatibility verification rule to be verified whose confidence level is less than a preset confidence threshold, and locate the problem code matching the compatibility verification rule to be verified in the front-end source code.

[0064] S250: Determine the purpose of the problem code according to the grammatical structure of the problem code, and obtain a second compatibility verification rule corresponding to the problem code according to the purpose of the problem code.

[0065] In this step, specifically, the programming specification of the problem code can be obtained based on the type of the problem code, and the purpose of the problem code can be determined based on the programming specification and grammatical structure of the problem code. Then, based on the purpose of the problem code, a second compatibility verification rule corresponding to the problem code can be obtained.

[0066] For example, assuming that the purpose of the problem code is dynamic component registration, the second compatibility verification rule corresponding to the problem code can be determined as whether the source of the problem code is credible and whether the content is simple. Assuming that the purpose of the problem code is a dynamic instruction parameter, the second compatibility verification rule corresponding to the problem code can be determined as whether the content of the problem code is simple and whether the parameter value range is within the parameter safety list. In actual applications, whether the content of the problem code is simple can be determined based on the readability, repeatability, complexity and coupling of the problem code.

[0067] Assuming the problem code is used for dynamic event monitoring, the second compatibility check rule corresponding to the problem code can be determined as follows: whether the event name of the problem code is from the list of trusted event names and whether the processing function is simple. In actual applications, the simplicity of the processing function can be determined based on its responsibilities, number of lines, nesting depth, and number of parameters.

[0068] Assuming the problem code is used for dynamic style binding, the second compatibility check rule corresponding to the problem code can be determined as follows: whether the style attribute name of the problem code is from the style safety list, and whether the style attribute value is within the attribute value safety list. Assuming the problem code is used for dynamic API call, the second compatibility check rule corresponding to the problem code can be determined as follows: whether the method name of the problem code is from the trusted method name list, and whether the API of the problem code is from the trusted API list.

[0069] S260. Obtain associated codes that have a dependency relationship with the problem code in the front-end source code through a pre-built text language large model, and determine the compatibility between the problem code and each preset browser based on the problem code, the associated code and the second compatibility verification rule.

[0070] In this step, specifically, the text language large model can be used to obtain associated codes that have a dependency relationship with the problem code in the front-end source code, determine the source of the problem code based on the associated codes, and determine the compatibility between the problem code and each preset browser based on the problem code, the source of the problem code and the second compatibility verification rule.

[0071] Optionally, after determining the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rule through a pre-built text language large model, it also includes: determining the compatibility risk level corresponding to the problem code based on the compatibility between the problem code and each preset browser, and generating an intermediate compatibility test report based on the problem code, the second compatibility verification rule corresponding to the problem code and the compatibility risk level; merging the initial compatibility test report and the intermediate compatibility test report to obtain a merged compatibility test report, and classifying the merged compatibility test report according to the compatibility risk level to obtain a classified compatibility test report including multiple categories; grouping each category in the classified compatibility test report according to the code type corresponding to each compatibility verification rule to obtain a target compatibility test report.

[0072] Specifically, the report content related to the compatibility verification rules to be verified can be obtained from the initial compatibility test report, and the report content related to the compatibility verification rules to be verified in the initial compatibility test report can be deleted. Then, based on the problem code, the second compatibility verification rule corresponding to the problem code, the compatibility risk level, and the recommended solution, an intermediate compatibility test report can be generated, and the intermediate compatibility test report can be merged with the deleted initial compatibility test report to obtain a merged compatibility test report.

[0073] Afterwards, the merged compatibility test report can be classified according to the compatibility risk level to obtain a classified compatibility test report including multiple categories, and the method for determining the compatibility risk level can be marked in the classified compatibility test report. The method for determining the compatibility risk level can be a set of rules or a large text language model. Finally, the classified compatibility test reports with the method for determining the compatibility risk level marked can be grouped according to the code type corresponding to each compatibility verification rule to obtain a target compatibility test report. After obtaining the target compatibility test report, the content in the target compatibility test report can be visualized. There can be many ways of visualization, such as generating bar charts and line charts.

[0074] The advantage of this setting is that by merging, classifying and grouping the compatibility detection reports, the compatibility issues of various types of codes under various compatibility risk levels can be intuitively displayed, making it easier to quickly handle various compatibility issues.

[0075] The technical solution of this embodiment obtains multiple code types corresponding to the front-end source code and a rule set corresponding to each code type; matches different types of code in the front-end source code with each first compatibility verification rule in the corresponding rule set; when the front-end source code matches any first compatibility verification rule, the first compatibility verification rule matching the front-end source code is used as a candidate compatibility verification rule; among the candidate compatibility verification rules, a compatibility verification rule to be verified with a confidence level less than a preset confidence threshold is obtained, and the problem code matching the compatibility verification rule to be verified is located in the front-end source code; the purpose of the problem code is determined based on the grammatical structure of the problem code, and a second compatibility verification rule corresponding to the problem code is obtained based on the purpose of the problem code; through a pre-constructed text language large model, associated code that has a dependency relationship with the problem code is obtained in the front-end source code, and the compatibility between the problem code and each preset browser is determined based on the problem code, the associated code and the second compatibility verification rule. This technical solution can achieve a technical means of quickly matching clear compatibility issues using the rule set, and then performing secondary detection for complex scenarios such as dynamic component registration and dynamic instruction parameters with the help of the text language large model, which makes up for the shortcomings of the rule set in context-dependent scenarios and greatly improves the accuracy of compatibility detection.

[0076] To explain the compatibility detection method and effect of the front-end source code in the present invention in detail, the following is a most detailed embodiment: Figure 3 As shown, the front-end source code can be received by the code receiving function module, and the front-end source code can be matched with each first compatibility verification rule by the rule matching function module to obtain candidate compatibility verification rules and an initial compatibility detection report corresponding to the candidate compatibility verification rules.

[0077] If there is a compatibility check rule to be verified whose confidence level is less than a preset confidence threshold among the candidate compatibility check rules, the secondary check function module will perform compatibility check on the problem code corresponding to the compatibility check rule to be verified again to obtain an intermediate compatibility check report. The report integration function module will integrate the initial compatibility check report and the intermediate compatibility check report to obtain a target compatibility check report. The target compatibility check report will be output by the report output function module, and the rule set will be optimized based on the target compatibility check report by the feedback optimization module.

[0078] If there is no compatibility verification rule to be verified whose confidence is less than a preset confidence threshold among the candidate compatibility verification rules, the initial compatibility detection report is directly used as the target compatibility detection report.

[0079] Specifically, the execution process of the rule matching function module can be as follows: Figure 4As shown, after obtaining different types of codes in the front-end source code, the CSS rule set is loaded for the CSS code, and the CSS code is matched with each first compatibility verification rule in the CSS rule set. The JS rule set is loaded for the first JavaScript code, and the first JavaScript code is matched with each first compatibility verification rule in the JS rule set. Among them, the first JavaScript code can be understood as JavaScript code that needs to detect whether there is an incompatible API. The template rule set is loaded for the template code, and the template code is matched with each first compatibility verification rule in the template rule set. The JS rule set is loaded for the second JavaScript code, and the second JavaScript code is matched with each first compatibility verification rule in the browser feature rule set. Among them, the second JavaScript code can be understood as JavaScript code that needs to detect whether there is a feature that is incompatible with the browser.

[0080] After matching various types of code in the front-end source code with the first compatibility verification rules in the corresponding rule set, a determination is made as to whether the front-end source code matches any of the first compatibility verification rules. If so, the process proceeds to the step of determining whether there is a compatibility verification rule to be verified among the candidate compatibility verification rules whose confidence level is less than a preset confidence threshold. If not, the compatibility check of the front-end source code ends.

[0081] The execution process of the secondary detection function module can be as follows Figure 5As shown, if the purpose of the problem code is dynamic component registration, then when the source of the problem code is trustworthy and the content is simple, the compatibility of the problem code is determined to be high; otherwise, the compatibility of the problem code is determined to be low. If the purpose of the problem code is not dynamic component registration, then determine whether the purpose of the problem code is a dynamic instruction parameter. If the purpose of the problem code is a dynamic instruction parameter, then when the content of the problem code is simple and the parameter value range is within the parameter safety list, then determine whether the compatibility of the problem code is high; otherwise, the compatibility of the problem code is determined to be low. If the purpose of the problem code is not a dynamic instruction parameter, then determine whether the purpose of the problem code is dynamic event monitoring. If the purpose of the problem code is dynamic event monitoring, then when the event name of the problem code comes from the trusted event name list and the processing function is simple, then determine whether the compatibility of the problem code is high; otherwise, the compatibility of the problem code is determined to be low. If the purpose of the problem code is not dynamic event monitoring, then determine whether the purpose of the problem code is dynamic style binding. If the purpose of the problem code is dynamic style binding, then when the style attribute name of the problem code comes from the style safety list and the style attribute value is in the attribute value safety list, the compatibility of the problem code is determined to be high; otherwise, the compatibility of the problem code is determined to be low. If the purpose of the problem code is not dynamic style binding, then the purpose of the problem code is determined to be dynamic API call, and when the method name of the problem code comes from the trusted method name list and the API of the problem code comes from the trusted API list, the compatibility of the problem code is determined to be high; otherwise, the compatibility of the problem code is determined to be low. After determining the compatibility of the problem code, an intermediate compatibility detection report is generated based on the problem code, the second compatibility verification rule corresponding to the problem code, and the compatibility risk level.

[0082] The execution process of the report integration function module can be as follows: Figure 6 As shown, the initial compatibility test report and the intermediate compatibility test report can be merged to obtain a merged compatibility test report, which can then be classified according to the compatibility risk level to obtain a classified compatibility test report including multiple categories. The classified compatibility test report can then be annotated with the method for determining the compatibility risk level, and each category in the classified compatibility test report, with the annotated compatibility risk level determination method, can be grouped according to the code type corresponding to each compatibility verification rule to obtain a target compatibility test report. Finally, the content of the target compatibility test report can be visualized.

[0083] The benefit of this setup is that, by combining rule sets with a large text language model, we can more accurately identify compatibility issues in front-end source code while avoiding reliance solely on the large text language model for compatibility testing, thereby improving the efficiency of compatibility testing. Secondly, by integrating compatibility testing reports, we can intuitively demonstrate the causes of compatibility issues, making it easier for developers to quickly locate and resolve them.

[0084] Example 3

[0085] Figure 7 : is a schematic diagram of a front-end source code compatibility detection device according to the third embodiment of the present invention. Figure 7 As shown, the device includes: a first compatibility verification module 71, a problem code location module 72 and a second compatibility verification module 73, wherein:

[0086] A first compatibility verification module 71 is configured to match the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any first compatibility verification rule, use the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule;

[0087] The problem code locating module 72 is used to obtain, from the candidate compatibility verification rules, a compatibility verification rule to be verified whose confidence level is less than a preset confidence threshold, and locate the problem code matching the compatibility verification rule to be verified in the front-end source code;

[0088] The second compatibility verification module 73 is used to obtain the second compatibility verification rules corresponding to the problem code, and determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rules through a pre-built text language large model.

[0089] The technical solution in this embodiment, through the mutual cooperation of the first compatibility verification module 71, the problem code location module 72 and the second compatibility verification module 73, solves the problem that manual code review or black box testing consumes a lot of manpower and material resources, and cannot conduct in-depth analysis of suspicious problem codes, resulting in the inability to quickly and accurately perform compatibility testing on the front-end source code. It can achieve fast and accurate compatibility testing of the front-end source code.

[0090] Optionally, the first compatibility verification module 71 is specifically used to: obtain multiple code types corresponding to the front-end source code, and a rule set corresponding to each code type; and match different types of code in the front-end source code with each first compatibility verification rule in the corresponding rule set.

[0091] Optionally, the device further includes a first rule determination module, which is configured to obtain incompatible grammatical elements corresponding to respective preset browsers, and use a regular expression corresponding to each incompatible grammatical element as a first compatibility verification rule.

[0092] Optionally, the second compatibility verification module 73 includes:

[0093] A code usage determination unit, configured to determine the usage of the problem code based on the grammatical structure of the problem code;

[0094] A second rule acquisition unit, configured to acquire a second compatibility verification rule corresponding to the problem code according to the purpose of the problem code;

[0095] The compatibility verification unit is used to obtain the associated code that has a dependency relationship with the problem code in the front-end source code through a pre-built text language large model, and determine the compatibility between the problem code and each preset browser based on the problem code, the associated code and the second compatibility verification rule.

[0096] Optionally, the device also includes an initial report generation module, which is used to: obtain the problem code lines and compatibility risk levels corresponding to the candidate compatibility verification rules, and generate an initial compatibility detection report based on the candidate compatibility verification rules, and the problem code lines and compatibility risk levels corresponding to the candidate compatibility verification rules.

[0097] Optionally, the device also includes a target report generation module, which is used to: determine the compatibility risk level corresponding to the problem code based on the compatibility between the problem code and each preset browser, and generate an intermediate compatibility test report based on the problem code, and the second compatibility verification rule and compatibility risk level corresponding to the problem code; merge the initial compatibility test report and the intermediate compatibility test report to obtain a merged compatibility test report, and classify the merged compatibility test report according to the compatibility risk level to obtain a classified compatibility test report including multiple categories; group each category in the classified compatibility test report according to the code type corresponding to each compatibility verification rule to obtain a target compatibility test report.

[0098] The front-end source code compatibility detection device provided in the embodiment of the present invention can execute the front-end source code compatibility detection method provided in any embodiment 1 of the present invention, and has the corresponding functional modules and beneficial effects of the execution method. For any content not fully described in this embodiment, reference can be made to the description of any method embodiment of this application.

[0099] Example 4

[0100] Figure 8FIG. 1 is a schematic structural diagram of an electronic device 10 that can be used to implement an embodiment of the present invention.

[0101] like Figure 8 As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc., which is communicatively connected to the at least one processor 11. The memory stores a computer program that can be executed by the at least one processor. The processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 into the random access memory (RAM) 13. Various programs and data required for the operation of the electronic device 10 can also be stored in the RAM 13. The processor 11, ROM 12, and RAM 13 are connected to each other via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0102] Multiple components in the electronic device 10 are connected to the I / O interface 15, including an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a magnetic disk, an optical disk, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0103] The processor 11 can be any general-purpose and / or specialized processing component with processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various processors that run machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The processor 11 executes the various methods and processes described above, such as the front-end source code compatibility detection method.

[0104] In some embodiments, the compatibility detection method for the front-end source code may be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the compatibility detection method for the front-end source code described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to execute the compatibility detection method for the front-end source code in any other appropriate manner (for example, by means of firmware).

[0105] Various embodiments of the systems and techniques described above can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include being implemented in one or more computer programs that are executable and / or interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0106] Computer programs for implementing the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when the computer program is executed by the processor, the functions / operations specified in the flowcharts and / or block diagrams are implemented. The computer program may be executed entirely on the machine, partially on the machine, as a stand-alone software package, partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0107] In the context of the present invention, computer-readable storage media can be tangible media that can contain or store a computer program for use with an instruction execution system, device or equipment or used in combination with an instruction execution system, device or equipment. Computer-readable storage media can include but are not limited to electronic, magnetic, optical, electromagnetic, infrared or semiconductor systems, devices or equipment, or any suitable combination of the foregoing. Alternatively, computer-readable storage media can be machine-readable signal media. More specific examples of machine-readable storage media can include electrical connections based on one or more lines, portable computer disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), optical fibers, portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0108] To provide interaction with a client user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the client user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the client user can provide input to the electronic device. Other types of devices can also be used to provide interaction with the client user; for example, the feedback provided to the client user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and the input from the client user can be received in any form (including acoustic input, voice input, or tactile input).

[0109] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a client user computer having a graphical client user interface or a web browser through which a client user can interact with embodiments of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0110] A computing system may include clients and servers. The clients and servers are typically remote from each other and typically interact via a communication network. This client-server relationship arises through computer programs running on the respective computers, creating a client-server relationship. The server may be a cloud server, also known as a cloud computing server or cloud host. This server is a hosting product within the cloud computing service ecosystem that addresses the management difficulties and limited scalability of traditional physical hosting and VPS services.

[0111] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in the present invention can be performed in parallel, sequentially, or in a different order, as long as the desired results of the technical solution of the present invention can be achieved. This is not limited herein.

[0112] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. A compatibility detection method for front-end source code, characterized in that: The method comprises: Matching the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any first compatibility verification rule, using the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule; From the candidate compatibility verification rules, obtain the compatibility verification rules to be verified whose confidence is less than a preset confidence threshold, and locate the problematic code that matches the compatibility verification rule to be verified in the front-end source code; Obtain the second compatibility verification rule corresponding to the problem code, and determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rule through a pre-built text language large model.

2. The method according to claim 1, characterized in that Match the front-end source code with multiple pre-defined first compatibility verification rules, including: Obtain multiple code types corresponding to the front-end source code, as well as the rule sets corresponding to each code type; Different types of code in the front-end source code are matched with each first compatibility verification rule in the corresponding rule set.

3. The method according to claim 1, characterized in that Before matching the front-end source code with a plurality of predefined first compatibility verification rules, the process further includes: Incompatible syntax elements corresponding to each preset browser are obtained, and a regular expression corresponding to each incompatible syntax element is used as a first compatibility verification rule.

4. The method according to claim 1, wherein Obtaining a second compatibility verification rule corresponding to the problem code includes: Determine the purpose of the problem code based on its grammatical structure; According to the purpose of the problem code, a second compatibility verification rule corresponding to the problem code is obtained.

5. The method according to claim 1, wherein Through the pre-built text language model, based on the front-end source code, the problem code and the second compatibility verification rules, the compatibility between the problem code and each preset browser is determined, including: Through the pre-built text language large model, the associated code that has a dependency relationship with the problem code is obtained in the front-end source code, and the compatibility between the problem code and each preset browser is determined based on the problem code, the associated code and the second compatibility verification rule.

6. The method according to claim 1, characterized in that After taking the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule, the method further includes: Obtain problem code lines and compatibility risk levels corresponding to candidate compatibility verification rules, and generate an initial compatibility detection report based on the candidate compatibility verification rules and the problem code lines and compatibility risk levels corresponding to the candidate compatibility verification rules.

7. The method according to claim 6, characterized in that After determining the compatibility between the problem code and each preset browser using the pre-built text language model, based on the front-end source code, the problem code, and the second compatibility verification rule, the following steps are also included: Determining a compatibility risk level corresponding to the problem code based on the compatibility between the problem code and each preset browser, and generating an intermediate compatibility test report based on the problem code, the second compatibility verification rule corresponding to the problem code, and the compatibility risk level; Merging the initial compatibility test report and the intermediate compatibility test report to obtain a combined compatibility test report, and classifying the combined compatibility test report according to the compatibility risk level to obtain a classified compatibility test report including multiple categories; Each category in the classification compatibility test report is grouped according to the code type corresponding to each compatibility verification rule to obtain a target compatibility test report.

8. A compatibility detection device for front-end source code, characterized in that: The device comprises: A first compatibility verification module is configured to match the front-end source code with a plurality of predefined first compatibility verification rules, and when the front-end source code matches any of the first compatibility verification rules, use the first compatibility verification rule that matches the front-end source code as a candidate compatibility verification rule; A problem code location module is used to obtain, from candidate compatibility verification rules, a compatibility verification rule to be verified whose confidence level is less than a preset confidence threshold, and locate problem codes matching the compatibility verification rule to be verified in the front-end source code; The second compatibility verification module is used to obtain the second compatibility verification rules corresponding to the problem code, and through a pre-built text language large model, determine the compatibility between the problem code and each preset browser based on the front-end source code, the problem code and the second compatibility verification rules.

9. An electronic device, characterized in that: The electronic device comprises: At least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the front-end source code compatibility detection method described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the compatibility detection method of the front-end source code according to any one of claims 1 to 7 when executed.

Images