A sandbox isolation style debugging method and device based on generative AI technology

Abstract

The application provides a sandbox isolation style debugging method and device based on generative AI technology, belonging to the technical field of low-code development, specifically comprising: creating an isolated sandbox rendering environment, loading user-defined styles, and establishing an accurate correspondence between pre-processing code and final CSS; custom styles are injected into the last position of the head area of the sandbox environment through the created style tag to provide a real-time preview interface, so that when the user modifies the style in the style editor, the page in the sandbox updates and displays the modification effect; receiving the user's modification operation on the style through the style editor or the style editor, injecting the sandbox environment to trigger interface update; and storing the final custom style file. By creating an isolated sandbox rendering environment, the style debugging process is limited within an independent space, effectively avoiding the impact of style conflicts on the entire page, improving the security and stability of debugging.

Description

Technical Field

[0001] The present invention belongs to the field of low-code development technology, and specifically relates to a sandbox isolation style debugging method and device based on generative AI technology. Background Art

[0002] With the continuous advancement of internet technology, front-end development has become an indispensable part of the software industry. It not only focuses on the visual presentation of a website but also involves multiple aspects, such as user experience optimization and responsive design. In these fields, rapid iteration and continuous integration / continuous deployment processes require developers to efficiently complete style debugging.

[0003] For example, in the digital media and e-commerce sectors, web design is in high demand because it directly impacts user interaction and conversion rates. Excellent web design not only attracts more visitors but also increases user retention and satisfaction. Therefore, effectively managing and debugging CSS styles has become a key issue.

[0004] However, in the custom style debugging of related technologies, there is a lack of effective isolation mechanisms. When developers are debugging styles, the modified styles may affect the normal operation of the main application. Once the style code is incorrect, the entire application interface will display abnormally, seriously affecting the development progress and user experience.

[0005] Secondly, support for multiple style formats is insufficient. Only standard CSS formats are supported, requiring developers to perform additional conversion and processing, increasing development workload and the risk of errors. Due to differences in priority between different style sheets and inline styles, when style conflicts arise, developers struggle to quickly identify the cause and resolution, often requiring significant time for troubleshooting and debugging. Furthermore, the debugging process lacks real-time feedback. After developers modify a style, they must manually refresh the page to see the effect, preventing them from promptly perceiving the changes brought about by the style modifications, reducing debugging efficiency. Summary of the Invention

[0006] The present invention provides a sandbox isolation style debugging method based on generative AI technology. The method creates an isolated sandbox rendering environment, limits the style debugging process to an independent space, effectively avoids the impact of style conflicts on the entire page, and improves the security and stability of debugging.

[0007] Methods include:

[0008] Step S101: creating an isolated sandbox rendering environment, using iframe or ShadowDOM as the underlying isolation technology to form a container space;

[0009] Step S102: Load the user-defined style, pre-process the loaded style to preserve the source code mapping relationship, and establish a correspondence between the pre-processed code and the final CSS;

[0010] Step S103: The custom style is injected into the last position of the head area of ​​the sandbox environment through the created style tag;

[0011] Step S104: injecting styles based on the sandbox environment, re-rendering the interface, and providing a real-time preview interface so that when the user modifies the style in the style editor, the page in the sandbox is updated to show the modified effect;

[0012] Step S105: receiving a user's modification operation on a style through a style editor or a style editor, and injecting the modified style into the sandbox environment to trigger an interface update;

[0013] Step S106: Based on the confirmation of the debugging completion instruction, the final custom style file is stored to complete the custom style debugging.

[0014] According to another embodiment of the present application, an electronic device is provided, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the sandbox isolation style debugging method based on generative AI technology when executing the program.

[0015] It can be seen from the above technical solutions that the present invention has the following advantages:

[0016] The sandboxed style debugging method, based on generative AI technology, provides a physically isolated sandbox rendering environment created through iframe or ShadowDOM. This ensures the stability and security of the main environment and prevents erroneous styles or scripts from impacting the main application during debugging. Furthermore, this independent container space provides users with a place to freely experiment with styles, allowing them to modify styles and interact with them without interference from the main environment, enhancing debugging flexibility.

[0017] The present invention supports the loading of standard CSS, Sass, and Less styles in multiple formats, meeting the coding habits and project requirements of different developers and improving applicability. The loaded styles are preprocessed and the source code mapping relationship is retained, so that developers can quickly locate the original style definition from the final CSS code during debugging, thereby improving debugging efficiency. When the preprocessed style is injected into the sandbox environment, the legality and integrity of the style code are ensured through verification, avoiding abnormal rendering of the sandbox environment due to code errors, and ensuring the smooth progress of the debugging process.

[0018] The present invention realizes real-time rendering and preview after style injection based on the sandbox environment. After users modify the style in the style editor, they can immediately see the page update effect in the sandbox without manual refresh or redeployment, realizing a what-you-see-is-what-you-get debugging experience, improving debugging efficiency, and facilitating users to quickly verify whether the style modification meets expectations.

[0019] This invention provides two ways to modify custom styles: style editor and style editor, which meet the debugging habits and scenario requirements of different users. Through the style editor, users can intuitively view the style rules applied to elements, calculate selector specificity weights, quickly analyze and resolve style conflicts, and improve debugging accuracy and efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solution of the present invention, the following is a brief introduction to the drawings required for the description. 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 paying any creative work.

[0021] Figure 1 A flow chart of the sandbox isolation style debugging method based on generative AI technology;

[0022] Figure 2 Schematic diagram of an electronic device. DETAILED DESCRIPTION

[0023] The following describes in detail the sandbox isolation debugging method based on generative AI technology involved in this application. Specific details such as specific system structures and technologies are provided for illustrative purposes rather than for limitation, to facilitate a thorough understanding of the embodiments of this application. However, it should be clear to those skilled in the art that this application can also be implemented in other embodiments without these specific details.

[0024] The phrases "one embodiment" or "some embodiments" described in this application mean that the specific features, structures, or characteristics described in the embodiment are included in one or more embodiments of the application. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in other embodiments," etc. that appear in different places in this application do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized.

[0025] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments 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 are within the scope of protection of the present invention.

[0026] See also Figure 1 FIG2 is a flowchart of a sandbox isolation debugging method based on generative AI technology in a specific embodiment, the method comprising:

[0027] Step S101: Create an isolated sandbox rendering environment, using iframe or ShadowDOM as the underlying isolation technology to form a container space.

[0028] In some embodiments, the operating environment is detected to obtain the browser type, version information and device performance parameters.

[0029] The underlying isolation technology is selected based on the detection results. If the browser supports ShadowDOM, its features are used to create an independent DOM tree and style scope to isolate the styles and scripts in the sandbox from the main document.

[0030] If the browser does not support it, use iframe technology to generate an iframe tag, and build an independent HTML page as a sandbox by setting the srcdoc attribute or loading a blank page first and then writing content.

[0031] It should be noted that during the creation process, the system will also set security policies such as Content-Security-Policy to restrict the access of scripts in the sandbox to external resources and prevent cross-domain security issues.

[0032] The system mentioned in this embodiment is a system for executing the sandbox isolation style debugging method based on generative AI technology of this application. The system can run on an electronic device, and the system can be a software program, and the specific type is not limited.

[0033] At the same time, a communication channel is established between the sandbox and the main environment, and two-way transmission of debugging instructions and rendering results is achieved based on window.postMessage and addEventListener.

[0034] Step S102: Load a user-defined style, which supports standard CSS, Sass, and Less formats. Preprocess the loaded style to retain the source code mapping relationship and establish an accurate correspondence between the preprocessed code and the final CSS.

[0035] In some embodiments, the preprocessor converts extended syntax such as variables, mixed macros, and nested selectors into standard CSS according to the syntax rules of Sass and Less. The source code map is generated according to a specific format, recording information such as the original file path, row and column offsets, and building a mapping table between the compiled code and the original code. When debugging, the browser or debugging tool can locate the problem in the final CSS to the original Sass / Less code based on the mapping table. In this way, retaining the source code map can significantly improve debugging efficiency. Developers can directly locate the problem in the original code from the final rendering exception. At the same time, preliminary verification ensures the basic quality of the style code.

[0036] Step S103: The custom style is injected into the last position of the head area of ​​the sandbox environment through the created style tag.

[0037] In some embodiments, a style tag is created, the type attribute is set to text / css, and the pre-processed CSS style code is written into the tag content.

[0038] It should be noted that before injection, the system performs a comprehensive validation of the style, including lexical analysis to check whether the code conforms to the CSS syntax specification, and optionally, whether the brackets match and the attribute value format is correct.

[0039] Attribute value validation ensures that the value and unit are within a reasonable range, such as width, which cannot be negative. Selector validation verifies that it correctly matches the page element. Once the validation passes, the system inserts the style tag at the end of the head section of the sandbox environment. By leveraging the browser's style loading order, user-defined styles have the highest priority, overriding default styles and other imported styles.

[0040] Step S104: injecting styles based on the sandbox environment, re-rendering the interface, and providing a real-time preview interface so that when the user modifies the style in the style editor, the page in the sandbox is updated to show the modification effect.

[0041] In some embodiments, after the style is injected into the sandbox, the browser engine in the sandbox starts the rendering process, performs style matching calculations based on the CSSOM and DOM trees, and determines the style rules that are ultimately applied to each element.

[0042] After completing the calculation in this embodiment, the browser rearranges the page, updates the geometric positions and sizes of the elements, and then performs drawing to update the visual presentation of the page.

[0043] Optionally, listen for content change events of the style editor, such as input and change events. When the user modifies the style, the system immediately captures the new code and repeats the preprocessing, injection, and rendering processes to achieve real-time updates of the sandbox page effects, allowing users to view the modification results instantly.

[0044] It should be noted that the browser rendering engine follows the CSSOM and DOM matching rules, traverses the DOM tree starting from the root element, and calculates the final style of each element in combination with the style sheet.

[0045] When a style is changed, a reflow is triggered based on the affected scope. This means that a width change causes a layout change, or a redraw occurs when only a color change is made. The live preview feature quickly responds to changes in the style editor, re-triggering the rendering process, applying the latest style to the page, and displaying it. This provides a WYSIWYG debugging experience, allowing users to see the effects of style changes immediately without having to manually refresh or redeploy, significantly improving debugging efficiency.

[0046] Step S105: receiving a user's modification operation on the style through the style editor or the style editor, and injecting the modified style into the sandbox environment to trigger an interface update.

[0047] In some embodiments, when a user modifies a style through a style editor: the user directly edits the CSS code in the editor to modify properties such as color, font, layout, etc. The editor captures key input, text modification, and other events in real time and passes the new code to the system.

[0048] This example preprocesses the new code, including recompiling Sass / Less and updating the source map. The preprocessed code is then injected into the sandbox environment, triggering the sandbox to rerender the page. The user determines whether the new page meets expectations based on the results. If not, they continue to modify the page until they are satisfied.

[0049] When the user modifies the style through the style editor: the target area of ​​the sandbox page is obtained, the system obtains the mouse coordinates by listening to the mousemove event, and uses the hit detection algorithm to calculate whether the coordinates are within the element bounding box, determine the selected page element, and select it.

[0050] After identifying and selecting a page element, all style rules applied to the element are collected, including custom styles, inline styles, style sheet styles, etc. According to the CSS specificity weight calculation rules, the ID selector weight is 100, the class selector weight is 10, the tag selector weight is 1, etc. The weight of each selector is calculated and sorted, and the results are displayed in the style editor.

[0051] Users can check the style coverage and analyze the reasons why the custom style does not take effect, such as insufficient weight, attribute conflict, etc., and make targeted modifications in the panel or editor. After the modification, the system will synchronously update the style editor and sandbox environment.

[0052] It should be noted that the style editor modification mode relies on event monitoring to obtain code changes, re-preprocessing and injection to achieve page updates.

[0053] In the style editor's modification mode, the hit detection algorithm determines the target element by comparing the coordinates selected during the user operation with the bounding box coordinates returned by the element; the specificity weight calculation is based on the CSS specification, and the style priority is determined by accumulating the selector weight values ​​to resolve style conflicts.

[0054] This way, different users' debugging habits and scenario requirements are met. The style editor displays style rules and weights in detail, helping users quickly locate and analyze styles, improving debugging accuracy and efficiency.

[0055] Step S106: Based on the confirmation of the debugging completion instruction, the final custom style file is stored to complete the custom style debugging.

[0056] In some embodiments, after the user confirms debugging is complete and issues a save command, the system compares the final applied style code in the sandbox with the original custom style code. Based on the source code mapping relationship, the system accurately synchronizes the style parts modified during debugging back to the original custom style file, ensuring that the original file is consistent with the debugging results.

[0057] After synchronization is completed, this embodiment will persistently store the final style file to a local disk, cloud storage, or other location, while recording metadata such as storage time, version number, and debugger to facilitate management and tracing during subsequent development and deployment.

[0058] It should be noted that this embodiment uses the correspondence between the original code and the compiled code recorded in the source code mapping so that the system can locate the position of the debugged modified part in the original file and accurately write the modified content into the original file.

[0059] In this embodiment, localStorage.setItem can be called for local storage, or uploaded to the cloud through an HTTP request to save the file and record metadata to form a complete version management record.

[0060] This ensures that debugging results are accurately synchronized with the original style file, avoiding errors caused by manual recording or copying and pasting, and ensuring the consistency of development results. Storage and metadata records facilitate subsequent version tracing and improve the maintainability of style files.

[0061] In one embodiment of the present invention, based on step S101, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S101 specifically includes:

[0062] Step S1011: Depending on the debugging scenario, select iframe or ShadowDOM as the underlying technology. If complete physical isolation and compatibility with older browsers are required, iframe is preferred. If more fine-grained style isolation is required (such as avoiding global style pollution) and the target browser supports newer features, ShadowDOM is selected.

[0063] Step S1012: If it is an iframe, create a blank HTML document and set the sandbox attribute.

[0064] If it is ShadowDOM, attach the Shadow root node to the host element through attachShadow({mode:'open'}) to ensure that its style scope is independent of the host document.

[0065] Step S1013: Configure the interaction interface between the sandbox and the outside world. For iframe, define the message protocol through postMessageAPI.

[0066] For ShadowDOM, a custom event listener is bound to the host element to receive external style modification requests and trigger internal rendering updates.

[0067] Step S1014: inject the test pattern and check the pattern performance inside and outside the sandbox.

[0068] If the background of the page outside the sandbox does not turn red, and the background inside the sandbox turns red, the isolation is confirmed to be effective.

[0069] If isolation fails, that is, external styles penetrate or internal styles leak, adjust the iframe's sandbox attribute value, or fix the container configuration and re-verify.

[0070] It can be seen that by building an isolated environment, the sandbox is ensured to have physical isolation capabilities, while supporting controllable interaction with the outside world and achieving real-time preview of style modifications.

[0071] This embodiment achieves real-time preview of style modifications by selecting technologies to adapt to scenarios, initializing structures to clarify scopes, configuring interfaces to open up communication links, and verifying validity to ensure isolation reliability.

[0072] Furthermore, in step S1011, when creating the sandbox environment, iframe and ShadowDOM are combined to achieve physical isolation through layered isolation;

[0073] The first layer of isolation uses iframes to restrict cross-domain communication; the second layer uses ShadowDOM to enclose the subtree structure, preventing styles and scripts from contaminating the main document. These two layers of isolation work together to ensure that the sandbox environment is completely isolated from external systems.

[0074] Step S1012: Adjust the isolation status in real time according to the user's operation behavior. Exemplarily, when the user executes an unknown script, enhance the isolation level and restrict global object access; when the user only performs low-risk style debugging, reduce the isolation intensity to improve performance.

[0075] Input the user operation behavior feature vector X = [x1, x2,..., xn], where xi represents the risk level of a specific operation.

[0076] Calculate the risk score R:

[0077]

[0078] where αi is the feature weight.

[0079] Adjust the isolation method according to the R threshold specifically as follows:

[0080] If R > Fg, activate the highest isolation mode, close the iframe communication, and seal the ShadowDOM.

[0081] If Fr < R ≤ Fg, enable the medium isolation mode and restrict access to some global objects.

[0082] If R ≤ Fr: Enable the low isolation mode and allow limited script execution.

[0083] Fg is a preset high-risk critical value used to determine whether the user's operation behavior belongs to high-risk behavior. When the risk score R exceeds Fg, the system considers that the current operation poses a relatively high security threat and needs to immediately take the highest level of isolation measures. Close the cross-domain communication of the iframe, seal the subtree structure of the ShadowDOM, and prohibit external scripts or styles from accessing the sandbox environment to prevent potential security vulnerabilities.

[0084] Exemplarily, when the user attempts to execute high-risk operations such as the eval function, modify global objects, or initiate high-frequency network requests, the system will trigger the determination of the Fg threshold.

[0085] The value of Fg is usually based on historical data analysis or the strictness requirements of security policies. For example: If the system has extremely high security requirements, Fg can be set as R > 0.8. If the system pays more attention to performance balance, Fg may be set as R > 0.95.

[0086] Fr is the low-risk threshold. Fr is a preset low-risk critical value used to determine whether the user's operation behavior belongs to low-risk behavior. When the risk score R is lower than Fr, the system considers that the current operation has extremely low risk and can reduce the isolation intensity to improve performance.

[0087] Triggering low isolation mode allows limited script execution and global object access while maintaining the basic isolation capabilities of iframes and ShadowDOM.

[0088] For example, when the user only performs low-risk operations such as style debugging and static element highlighting, the system will trigger the determination of the Fr threshold.

[0089] The value of Fr is used in conjunction with Fg to form a safety interval Fr <R≤Fg。

[0090] For example, if the system is expected to tolerate most normal operations, Fr may be set to R≤0.3. If the system has higher safety requirements, Fr may be set to a value close to Fg, such as R≤0.7.

[0091] Step S1013: A security monitoring module is embedded in the sandbox container to detect abnormal behavior inside the sandbox in real time. The security monitoring module captures runtime events using lightweight probe technology and determines whether to trigger an isolation policy upgrade or an alarm based on pre-set rules.

[0092] In this embodiment, the security monitoring module uses a statistical-based anomaly detection algorithm to establish a Gaussian distribution for the operation behavior within the sandbox.

[0093] It should be noted that in step S1013, the security monitoring module models the operation behavior in the sandbox through Gaussian distribution, and calculates the deviation D based on this to determine the abnormality.

[0094] Specifically, the Gaussian distribution is a continuous probability distribution whose probability density function is a symmetrical bell-shaped curve, specifically involving mean μ and standard deviation σ.

[0095] The mean μ represents the central trend of the data, that is, the normal baseline value of operation behavior in the sandbox, such as the average frequency of users' daily operations and typical interaction patterns.

[0096] The standard deviation σ indicates the degree of dispersion of the data, that is, the fluctuation range of the operation behavior deviating from the mean. The larger σ is, the more dispersed the data is; the smaller σ is, the more concentrated the data is.

[0097] Under the Gaussian distribution assumption, this embodiment can assume that approximately 70% of the data falls within the range [μ - σ, μ + σ] (1σ interval), approximately 95% falls within the range [μ - 2σ, μ + 2σ] (2σ interval), and approximately 99.7% falls within the range [μ - 3σ, μ + 3σ] (3σ interval). This approach provides a statistical method for calculating the deviation D.

[0098] Deviation D is based on the degree of deviation of quantitative data from the mean. The method for calculating the deviation D of real-time operation behavior is:

[0099]

[0100] in, It is the characteristic value of real-time operation behavior, such as user operation frequency, script execution times, etc.

[0101] m is the mean of the Gaussian distribution, specifically the benchmark value for normal operation; s is the standard deviation of the Gaussian distribution and is the fluctuation range of normal operation.

[0102] For example, after calculation, D =1, the data point deviates from the mean by 1 standard deviation and falls within the 1σ interval, which is a normal fluctuation. D =3, the data point deviates from the mean by 3 standard deviations and falls outside the 3σ interval, which is a low-probability abnormal event.

[0103] The Gaussian distribution of this embodiment provides a statistical benchmark for normal behavior for the calculation of D, while D provides a quantitative basis for judging abnormal behavior. The specific collaborative logic is as follows: Modeling normal behavior: By collecting historical operation data in the sandbox, such as the user's daily style modification frequency, script call times, etc., calculate its mean m and standard deviation s , reflecting the statistical characteristics of normal operations.

[0104] Real-time operation behavior characteristic values , substitute it into the formula for D to calculate its deviation from the mean. The larger the D value, the more the current operation deviates from the normal mode.

[0105] This embodiment also sets an abnormal threshold θ, based on the probability characteristics of the Gaussian distribution, such as 99.7% of the data falls within 3σ, and sets the deviation threshold i .when D > i When the current operation is determined to be abnormal, the isolation policy upgrade or alarm is triggered.

[0106] It can be seen that the Gaussian distribution provides a statistical benchmark for the calculation of the deviation degree D by describing the normal fluctuation range of operation behavior in the sandbox, defined by μ and σ. The deviation degree D quantifies the degree of deviation of the data from the mean, combined with the 3σ rule of the Gaussian distribution, to achieve quantitative judgment of abnormal operations, ensuring that the security monitoring module can accurately identify abnormal behavior in the sandbox.

[0107] Step S1014: Preload style resources during sandbox initialization using a rendering mechanism that combines preloading and lazy loading. The priority of preloaded resources is determined by user operation history and current debugging needs, reducing rendering latency and improving interaction fluency.

[0108] This embodiment uses a priority sorting algorithm based on user behavior, collects user operation history data, and constructs a resource importance matrix. The method for calculating the resource priority score P is:

[0109]

[0110] in, is the i-th feature, such as page dwell time, element interaction times, is the feature weight. The resource loading order is sorted in descending order according to the resource priority score P, and high-priority resources are loaded first.

[0111] As can be seen, the cross-domain isolation of iframes and the closed nature of ShadowDOM form a double isolation barrier. iframes restrict external scripts from directly accessing sandboxed content, while ShadowDOM closes the subtree structure, preventing styles and DOM from contaminating the main document. Isolation strength is adjusted in real time based on user behavior analysis. Anomalies can also be detected, triggering alerts and forcing isolation policy upgrades to improve system security. Loading order is assigned using a resource priority prediction model. Core style resources are loaded first, while non-critical resources are loaded later, reducing initial rendering time.

[0112] In one embodiment of the present invention, based on step S102, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S102 specifically includes:

[0113] Step S1021: Perform multi-format recognition on the loaded custom style, parse Sass / Less variables and mixed macro syntax, establish a style syntax feature mapping table, and mark the syntax nodes that need to be retained during preprocessing.

[0114] Step S1022: Optimization is performed based on the style syntax feature mapping table, repeated selectors are merged, redundant attribute values ​​are compressed, and performance loss prediction is performed on transition attributes to generate an optimization suggestion mark.

[0115] Step S1023: Based on the browser type detected by the sandbox environment, the non-standard attributes in the custom style are supplemented with the kernel prefix, and the prefix compatibility validity is verified;

[0116] Step S1024: Add conditional style wrapping to the custom style based on the host device parameters and the isolation level of the sandbox configuration to achieve style adaptation at different isolation levels.

[0117] As can be seen, this embodiment uses a syntax analyzer to traverse the style text, matching the Sass / Less syntax pattern, recording information such as variable scope and mixin parameters, and forming a traceable syntax tree node map to ensure that the syntax is not corrupted during preprocessing. Based on selector matching rules and CSS property priority specifications, the rule engine detects duplicate selectors and merges declaration blocks.

[0118] This embodiment maintains a browser kernel-attribute prefix mapping database, performs multi-prefix completion on CSS properties based on the kernel type detected by the sandbox environment, and verifies the grammatical validity of the completed properties through CSS verification.

[0119] In one embodiment of the present invention, based on step S103, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S103 specifically includes:

[0120] Step S1031: Before injecting the custom style into the sandbox environment, scan the style to detect whether there are unsafe style attributes, such as expression injection, external script references, etc., and mark or repair the detected security issues to ensure that the injected style does not pose a security threat to the sandbox environment and the host page.

[0121] Step S1032: When a custom style is modified, only the modified style fragment is re-preprocessed and injected into the sandbox environment, rather than the entire style file, to improve debugging efficiency and reduce the rendering burden of the sandbox environment.

[0122] Step S1033: When injecting the style, additional scope restriction rules for the style application are applied so that the custom style only acts on the specified elements or components within the sandbox, preventing the style from leaking outside the sandbox environment and affecting other parts of the host page, thereby enhancing the isolation of the sandbox environment.

[0123] After injecting a new style version, a one-click rollback function is provided to quickly restore to the last stable style version, ensuring that users can easily compare the effects of different style versions during debugging and quickly restore to normal state when problems arise.

[0124] This embodiment ensures the security of the sandbox environment and the host page by performing security scanning and repair on styles. Pushing modified style snippets to the sandbox environment improves debugging efficiency, allowing users to more quickly see the effects of style modifications and accelerating development iterations. Additional style scope restriction rules enhance the isolation of the sandbox and ensure the stability and consistency of other parts of the page.

[0125] In one embodiment of the present invention, based on step S104, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S104 specifically includes:

[0126] Step S1041: Establish a multi-dimensional rendering performance monitoring system to collect performance indicators such as page rendering frame rate, redraw and reflow times, and style calculation time in real time, and generate a performance evaluation report.

[0127] Step S1042: Perform intelligent rendering optimization based on the performance evaluation report, replace or split high-loss styles, and give priority to rendering key path elements to improve the first screen loading speed.

[0128] The criteria for determining the key path elements here are first screen visibility or user interaction frequency.

[0129] It should be noted that costly styles refer to CSS style rules or properties that generate high-frequency, high-complexity, or unnecessary rendering operations when parsed, calculated, or applied by the browser during the front-end page rendering process. Running costly styles can trigger more reflows / repaints in the browser, consume more memory or CPU resources, and thus reduce page rendering performance. Step S104 of this embodiment improves the smoothness of real-time previews in a sandbox environment through rendering optimization.

[0130] When users modify styles in the style editor, the sandbox environment responds and re-renders. Costly styles, such as width changes that frequently trigger reflows or complex box-shadows, can cause rendering delays, lags, or preview desynchronization. By identifying and optimizing styles, such as replacing width with transform to adjust layout and simplifying the selector hierarchy, the computational cost of a single render can be reduced, ensuring fast page updates after user modifications.

[0131] Step S104 mentions prioritizing rendering of critical path elements to speed up first-screen loading. Costly styles can delay the rendering of first-screen text and buttons. By splitting or replacing costly styles, such as moving complex animations to non-critical elements or delaying the loading of costly styles outside the first screen, critical path elements can be prioritized, shortening the time it takes for users to see effective content for the first time.

[0132] Optionally, in step S104, the performance evaluation results are visualized in the debugging interface. The distribution of high-loss patterns can be annotated using a heat map or other form, marking areas of elements that frequently trigger reordering. This allows users to intuitively locate performance bottlenecks and perform manual operations to resolve them.

[0133] Step S1043: selectively enable rendering mode according to the isolation level of the mobile device, desktop device, and sandbox environment.

[0134] Step S1044: The performance evaluation results are visualized in the debugging interface. The user locates the rendering status through the performance heat map and applies the optimization solution recommended by the system with one click.

[0135] This implementation leverages browser performance APIs, such as performance.now() to calculate elapsed time and MutationObserver to monitor redraws and reflows triggered by DOM changes. It periodically collects rendering-related metrics and comprehensively evaluates rendering performance based on style complexity. Using a pre-set performance rule library, it performs semantic analysis on high-cost styles and replaces them with low-cost attributes. It also renders non-critical elements in batches using requestAnimationFrame.

[0136] Adjust rendering strategies based on device parameters and sandbox configuration. Convert performance data into a visual heatmap. Click a heatmap node to retrieve the corresponding style code. Generate optimization suggestions based on the performance rule library. Automatically apply the changes after user confirmation.

[0137] Step S1042 in the embodiment of the present application specifically includes:

[0138] Step S10421: Based on the rendering time, redraw times and other indicators in the performance evaluation report, set the rendering time of a single style to be >50ms or trigger more than 3 redraws, mark the CSS selectors with more than 5 nested levels and the rules containing redundant box-shadow attributes.

[0139] Step S10422: Replace complex nested selectors with flat class selectors; merge redundant attributes into a single rule; split animation styles into base styles and incremental styles to reduce the computational complexity of a single rendering.

[0140] Step S10423: Build a critical path element priority model, assign priority weights to elements based on their position in the first screen, user interaction frequency, and style dependencies, and determine the rendering order.

[0141] Step S10424: Verify the effectiveness of the optimization solution by comparing the performance evaluation reports before and after optimization and combining them with the actual user operation simulation; if the verification fails, go back to step S10422 to adjust the optimization strategy.

[0142] This embodiment solves the problems of high blindness in rendering performance optimization, delayed loading of key content, and difficulty in verifying the effectiveness of optimization solutions in the existing technology by identifying high-loss patterns, matching targeted optimization strategies, prioritizing rendering of key path elements, and verifying the optimization results, thereby improving the first screen loading speed and rendering efficiency.

[0143] The system simulates user operations in a sandbox environment, recollects indicators such as rendering frame rate and redraw times, and calculates the optimization rate. Optimization rate = original rendering time - new rendering time × 100%.

[0144] If the optimization rate is less than 20%, the strategy is determined to be invalid, and the process goes back to step S10422 to adjust the replacement rules, such as changing the flat selector to a shorter class name or reallocating the priority weight.

[0145] Step S1043 in the embodiment of the present application specifically includes the following steps:

[0146] Step S10431: Enable touch-optimized rendering mode, adjust element spacing and interactive hotspot size, and improve the convenience and accuracy of touch operations.

[0147] Step S10432: Enable rendering mode for desktop devices to support higher resolution and more refined visual effects, while utilizing multi-core processors for parallel style calculations to improve rendering efficiency.

[0148] Step S10433: When the isolation level of the sandbox environment is high, start the secure sandbox rendering mode to limit the style's access rights to system resources to prevent potential security risks.

[0149] Step S10434: Adjust the rendering strategy according to the network status of the device, such as giving priority to rendering the core content when the network is unstable and delaying the loading of non-critical style resources.

[0150] It can be seen that in step S10431: after detecting a mobile device, the system automatically adjusts the layout parameters of the page elements, such as increasing the click area of ​​buttons and links, increasing the spacing between elements, etc., to ensure that users are more convenient and accurate when performing touch operations.

[0151] At the same time, the response mechanism of touch events is optimized, such as reducing touch delay and optimizing sliding effects, to improve the overall interaction smoothness.

[0152] Step S10432: Enable high-resolution rendering settings for desktop devices to support richer visual effects, such as complex shadows, gradients, and animations. At the same time, by leveraging the multi-core processors of desktop devices, multi-threading technology is used for style calculation and page layout to improve rendering efficiency.

[0153] For example, the style calculation task is distributed to multiple processors to achieve parallel computing and shorten the page rendering time.

[0154] Step S10433: When the isolation level is high, the system restricts the loading and execution of style resources.

[0155] For example, the source domain of style files is restricted, and styles are prohibited from accessing local storage and sensitive device information. At the same time, the style code is sandboxed to ensure that all style operations are performed in a secure environment to prevent potential security vulnerabilities from being exploited.

[0156] Step S10434: By detecting the device's network connection speed and stability, the system automatically adjusts resource loading priorities. When the network is unstable or bandwidth is low, core content styles, such as the main page structure and key text styles, are prioritized, while non-critical visual resources, such as decorative images and complex animations, are loaded later. Simultaneously, resource caching strategies are optimized to reduce duplicate requests, ensuring a superior user experience even under limited network conditions.

[0157] In one embodiment of the present invention, based on step S105, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S105 specifically includes:

[0158] Step S1051: When modifying a style through the style editor, analyze the impact of the current modification on the styles of other elements, predict possible style conflicts, and provide repair suggestions or automatically repair some conflicts.

[0159] As an implementation method of the embodiment of this application, step S1051 specifically includes the following content:

[0160] Step S10511: Constructing a style dependency graph is mainly based on the adjacency list or adjacency matrix data structure in graph theory. The relationship between style inheritance and overlay can be recorded through bidirectional mapping to form a traceable dependency chain.

[0161] Here, each element style in the page is regarded as a node in the graph, and the dependency, inheritance, and override relationships between elements are regarded as edges. By traversing the DOM tree and style rules of the page, the connection relationship between nodes is established.

[0162] For example, if a child element inherits the font style of its parent element, a directed edge is created in the graph from the parent element's font style node to the child element's font style node. The graph construction follows basic graph theory principles and page rendering rules, without involving complex mathematical formulas.

[0163] Step S10512: Using historical style conflict data as training samples, extract the selector type, attribute name, value range, etc. of the style rule, and use the machine learning model to build a classification model.

[0164] The machine learning model predicts and classifies new types of potential conflicts by learning the mapping relationship between different features and conflict types. The training and prediction process of the machine learning model follows the basic machine learning process and does not involve additional mathematical model construction.

[0165] Step S10513: When the system detects a specific type of style conflict, it searches for a matching repair solution in the template library based on the conflict mode, such as selector specificity conflict, attribute value override conflict, etc.

[0166] The fix comes in the form of rule replacement, replacing low-specificity selectors with high-specificity ones, adjusting the priority of style attributes, etc. Conflicting styles are replaced and adjusted according to pre-set rules to achieve automatic repair.

[0167] Step S10514: Utilizing the rendering engine's public API or a custom layout algorithm, the layout and style attributes of the page elements are recalculated based on the current page's DOM state and CSS style rules, as well as the user's style modification operations. A simulated rendering environment is constructed in memory to generate the modified page visual effect.

[0168] As can be seen, building a style dependency graph can intuitively display the inheritance and override relationships between styles, helping developers quickly locate the source of conflicts and improving the visibility and logic of style debugging. The conflict prediction model based on machine learning models uses historical data to identify potential conflicts with new styles in advance, reducing trial and error costs during debugging. Replacing conflicting styles according to template library rules avoids the complexity of manual adjustments. This is particularly suitable for large-scale style conflict scenarios, improving debugging efficiency and enhancing the efficiency and stability of front-end style development.

[0169] Step S1052: When the user selects a style attribute to modify in the style editor, the page area affected by the style attribute is highlighted in real time in the sandbox page, and a reference line or size indicator is provided to help the user intuitively understand the effect of the style modification.

[0170] Step S1053: Record each modification operation of the user on the custom style, including the modification time, modified properties, values ​​before and after modification, etc., allowing the user to review the historical modification steps along the timeline, and supporting undo and redo of specific modification operations.

[0171] Step S1054: When the user previews the sandbox page in multiple simulated device views at the same time and the user modifies the style in the style editor or style editor, all simulated device views are updated synchronously to show the rendering effect of the style on different devices.

[0172] As can be seen, step S1051 is based on style dependency analysis and conflict detection. When a user modifies an element's style, it analyzes the current element's selector structure, attribute definitions, and the style rules of other related elements on the page. By comparing selector specificity weights and the inheritance relationships of style attributes, it predicts the potential conflicts that the modified style may cause on other elements. For predicted conflicts, the system provides repair suggestions based on predefined repair rules or automatically applies repair operations, reducing the workload of users manually troubleshooting and resolving conflicts.

[0173] Step S1052 combines CSS visualization features with the geometric information of page elements. When a user selects a style attribute to modify, the system uses the browser's rendering information interface to obtain the geometric data of the page area affected by the attribute, such as the boundaries and dimensions. By drawing a semi-transparent highlight area or reference line on the sandbox page, the affected area is visually displayed.

[0174] For example, when you modify the margins of an element, the system draws a margin indicator line; when you modify the color, the area where the color is applied is highlighted. This helps users more intuitively understand the effects of style properties and improves debugging efficiency.

[0175] Step S1053 generates a detailed log entry for each style modification operation, recording the modification timestamp, the modified style rule, the specific property changes, and so on. Users can view these log entries through the history panel in the debugging interface and select to revert to a specific historical state. The system rebuilds the style file based on the selected historical state and re-injects it into the sandbox environment, restoring the page rendering effect to that state.

[0176] Step S1054 utilizes responsive design simulation and multi-view synchronous update methods to create multiple simulated device views in the debugging interface, each corresponding to a different screen size and device characteristics. When the user modifies the style, the system injects the modified style into the sandbox environment of all simulated device views at the same time through a unified style update mechanism. Each view re-renders the page according to its own size and configuration, showing the actual display effect of the style on different devices. This enables users to observe and adjust the performance of styles on multiple devices simultaneously in a single debugging session, ensuring that the responsive design of the style meets expectations and improving the efficiency of cross-device debugging.

[0177] In conjunction with the above-described embodiment of step S105, step S1051 analyzes the selector's specificity weight, attribute inheritance, and cascading rules to predict the impact of style modifications on other elements. The visual assistance function in step S1052 is primarily based on the geometric information of page elements and CSS rendering properties. Using geometric data such as element border information, margins, and padding provided by the browser, temporary graphical elements are drawn on the page to indicate the scope of influence of style properties. Step S1053 treats each style modification as a separate operation and records all necessary information about the operation to reconstruct the style state at that time. This can be implemented by maintaining an operation stack, pushing each operation onto the stack as an object. When backtracking is required, operations are popped off the stack in order and the modifications are reversed, or the entire style file is rebuilt directly based on the historical record. Step S1054 sets specific viewport size, resolution, and other parameters for each simulated device view. When the style is injected into the sandbox environment, each view reapplies the style according to its own parameters and renders the page. When the view size changes, the browser automatically applies the corresponding style. The synchronous update mechanism ensures that all views are refreshed at the same time when the style is modified. This can be achieved by observing the change event of the style editor and triggering the sandbox environment re-rendering operation of all device views.

[0178] In one embodiment of the present invention, based on step S106, a possible embodiment is given below to illustrate its specific implementation scheme in a non-limiting manner. Step S106 specifically includes:

[0179] Step S1061: Before storing, compare the actual rendering effect in the sandbox environment with the style file output to ensure that the file contains style rules and has no syntax errors, so as to avoid rendering deviations during subsequent use.

[0180] Step S1062: Convert the final custom style into standard CSS, Sass, Less, and other formats based on user needs or project technology stack to ensure direct reusability in different development environments.

[0181] Step S1063: Add metadata such as version number, timestamp, author information, and modification history to the stored form file.

[0182] Step S1064: The user's modification records, debugging logs, and solutions during the debugging process are associated with the final style file and stored to form a complete debugging knowledge base.

[0183] It can be seen that through pre-storage verification, multi-format conversion, version management and debug log association, problems such as incomplete style file storage, cross-environment incompatibility, version confusion, and inability to reuse debugging experience in existing technologies are solved, ensuring the high quality, maintainability and traceability of the final style file.

[0184] Furthermore, as a refinement of the specific implementation of the above-mentioned sandbox isolation style debugging method based on generative AI technology, in order to fully illustrate the specific implementation process of this embodiment, the sandbox isolation style debugging method based on generative AI technology also includes the following specific steps:

[0185] Create an isolated sandbox rendering environment. Using iframe or ShadowDOM as the underlying isolation technology, this creates a physically isolated container space. The sandbox environment serves not only as a preview area for user-modified styles but also as an interactive area for subsequent user selection of interface elements.

[0186] Load user-defined styles. The system supports multiple style formats, including standard CSS, Sass, and Less. After loading the style, the system needs to preprocess the style, preserve the source code mapping relationship, and establish an accurate correspondence between the preprocessed code and the final CSS.

[0187] This embodiment enables the original style definition to be reversed during subsequent debugging, achieving synchronization between the debug style and the user-defined style. At the same time, the system loads the user-defined style into the style editor for the user to modify.

[0188] This example injects preprocessed styles into the sandbox's head section by creating a style tag. This tag should be injected at the end of the head section to ensure that user-defined styles have the highest priority. During style injection, the system verifies the code's legitimacy and integrity, preventing rendering anomalies in the sandbox environment caused by incorrect styles.

[0189] In this embodiment, after the style is injected, the sandbox automatically applies the style and re-renders the interface. At this time, the user can see the interface effect after applying the custom style in the sandbox. The sandbox environment provides a real-time preview function. When the user modifies the style in the style editor, the page in the sandbox will be updated immediately to show the modified style effect, realizing a WYSIWYG debugging experience. During the user modification and debugging process of custom styles, the system supports users to modify custom styles using the style editor and style editor.

[0190] It should be noted that the user moves the mouse to the sandbox page: When the user finds that the interface display effect is inconsistent with expectations, the user moves the mouse to the area that needs to be checked in the sandbox page. The system automatically detects the mouse position and selects the page element under the mouse to facilitate the user to select the element. The user clicks the corresponding element: The user clicks the element to be checked to confirm the style debugging of the element. The system highlights the edges of the corresponding element: The system highlights the edges of the selected element so that the user can clearly see the position and boundaries of the element on the page. The system collects all style rules, calculates the selector specificity weight, and displays the results in the style editor: The system collects all style rules applied to the element, including custom styles, inline styles, style sheet styles, etc., and calculates the specificity weight of each selector, sorts them according to the weight, and displays the results in the style editor.

[0191] The user views the inline styles, style sheets, inherited styles, and style overrides currently applied to the element and confirms the issue of custom styles not taking effect: The user views the various styles currently applied to the element and their priority relationships in the style editor to find out the reasons why the custom style is not taking effect, such as style conflicts, insufficient specificity weight, etc.

[0192] Regarding user modification of styles, users modify styles in the style editor: based on the analysis results, users make corresponding modifications to the custom style in the style editor, increase the selector specificity weight, adjust the style attribute value, etc., and then move the mouse to the area that needs to be checked in the sandbox page.

[0193] The user modifies the style in the style editor: When the user modifies the custom style in the style editor, the system synchronizes the style to the custom style editor based on the source code mapping.

[0194] The style editor of this embodiment is used to display all styles applied to the currently selected element, displaying them from top to bottom in the order of inline styles, style sheets, inherited styles, and browser built-in styles. Overridden styles are marked with a strikethrough, indicating that other styles have a higher priority than the style being overridden, and the style is overridden and not effective. Non-user-defined styles such as inline styles, style sheets, and inherited styles cannot be modified by the user; users can only modify styles defined in custom styles.

[0195] It's important to note that after a user modifies a style in the style editor, the system synchronizes the modified style with the user's custom style based on the source code map and updates the style editor for subsequent editing. This allows users to easily debug the style in the style editor and ensure that the debugging results are accurately reflected in the custom style. Once the user confirms the debugging is complete and saves the custom style, the system persists the final custom style file for use during subsequent development and deployment. This synchronization mechanism ensures consistency between the custom style in the debugging environment and the actual application environment, improving the maintainability and reusability of the style.

[0196] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0197] like Figure 2 As shown, the present application also provides an electronic device, including a display module 103, a memory 102, a processor 101, and a computer program stored in the memory and executable on the processor 101, wherein the processor 101 implements the steps of a sandbox isolation style debugging method based on generative AI technology when executing the program.

[0198] In the embodiments of the present invention, electronic devices include, but are not limited to, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of the present application described and / or claimed herein.

[0199] In the embodiment of the present application, the processor 101 can be implemented by using at least one of a special purpose integrated circuit, a programmable logic device, a field programmable gate array, a processor, a controller, a microcontroller, a microprocessor, and an electronic unit designed to perform the functions described herein. In some cases, such an embodiment can be implemented in a controller. For software implementation, an embodiment such as a process or function can be implemented with a separate software module that allows the execution of at least one function or operation. The software code can be implemented by a software application (or program) written in any appropriate programming language, and the software code can be stored in a memory and executed by a controller.

[0200] The display module 103 is used to display information input by the user or information provided to the user. The display module 103 may include a display panel, which may be configured in the form of a liquid crystal display, an organic light emitting diode, etc.

[0201] The memory 102 may be used to store software programs and various data. The memory 102 may include a high-speed random access memory and a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage device.

[0202] The above description of the disclosed embodiments is intended to enable one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be readily apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention is not limited to the embodiments shown herein but is intended to conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A sandbox isolation style debugging method based on generative AI technology, characterized in that: The method includes: Step S101: Create an isolated sandbox rendering environment to form a container space; When creating the sandbox environment, combine iframe and ShadowDOM to achieve physical isolation through hierarchical isolation; The first layer of isolation uses iframe to implement cross - domain communication restrictions; the second layer of isolation closes the subtree structure through ShadowDOM; Adjust the isolation status in real - time according to user operation behaviors; when the user executes an unknown script, restrict access to global objects; when the user only performs low - risk style debugging, allow limited script execution; Step S102: Load user - defined styles. The user - defined styles support standard CSS, Sass, and Less formats. Pre - process the loaded styles to retain the source map relationship and establish the correspondence between the pre - processed code and the final CSS; Step S103: Inject the user - defined styles into the last position of the head area of the sandbox environment through the created style tag; Step S104: Inject the styles based on the sandbox environment, re - render the interface, and provide a real - time preview interface. When the user modifies the styles in the style editor, the page in the sandbox updates to display the modification effect; After the styles are injected into the sandbox, the browser engine in the sandbox starts the rendering process, performs style matching calculations based on the CSSOM and DOM trees, and determines the style rules finally applied to each element; After the calculation is completed, the browser re - layouts the page, updates the geometric positions and sizes of the elements, and then performs drawing to update the visual presentation of the page; Step S105: Receive the user's modification operations on the styles through the style editor. The modified styles are injected into the sandbox environment to trigger interface updates; When the user modifies the styles through the style editor: The user directly edits the CSS code in the editor; the editor captures key input and text modification events in real - time, passes the new code to the system; re - pre - process the new code, inject the pre - processed code into the sandbox environment, and trigger the sandbox to re - render the page; Step S106: Based on the confirmation instruction that the debugging is completed, store the final user - defined style file to complete the debugging of the user - defined styles.

2. The sandbox isolation style debugging method based on generative AI technology according to claim 1, wherein In step S101, obtain the user operation behavior feature vector X=[x1,x2,...,x n ], where x i Indicates the risk level of a specific operation; Calculate the risk score R: where α i is the feature weight; Adjust the isolation method according to the R threshold specifically as follows: If R > Fg, activate the highest isolation mode, close the iframe communication, and close the ShadowDOM; If Fr < R ≤ Fg, enable the medium isolation mode and restrict access to some global objects; If R ≤ Fr: Enable the low isolation mode and allow limited script execution; Fg is a preset high - risk critical value used to determine whether the user's operation behavior belongs to a high - risk behavior; Fr is a preset low - risk critical value used to determine whether the user's operation behavior belongs to a low - risk behavior; When the risk score R is lower than Fr, it is determined that the current operation risk is lower than the risk threshold; Trigger the low isolation mode to allow limited script execution and global object access, while maintaining the basic isolation capabilities of iframe and ShadowDOM; When the risk score R exceeds Fg, the system considers the current operation risk to be higher than the risk threshold, closes the cross-domain communication of the iframe, closes the subtree structure of the ShadowDOM, and prohibits external scripts or styles from accessing the sandbox environment.

3. The sandbox isolation style debugging method based on generative AI technology according to claim 1 is characterized in that: In step S101, a security monitoring module is embedded in the sandbox container to detect abnormal behavior inside the sandbox in real time; The security monitoring module uses a statistical anomaly detection algorithm to establish a Gaussian distribution for operational behaviors within the sandbox; Through the rendering mechanism that combines preloading and lazy loading, style resources are preloaded when the sandbox is initialized.

4. The sandbox isolation style debugging method based on generative AI technology according to claim 1 is characterized in that: In step S102, the loaded custom style is subjected to multi-format recognition, Sass / Less variables and mixed macro syntax are parsed, a style syntax feature mapping table is established, and syntax nodes that need to be retained during preprocessing are marked; Optimizes based on the style syntax feature mapping table, merges duplicate selectors, compresses redundant attribute values, predicts performance loss for transition attributes, and generates optimization suggestion tags. Based on the browser type detected by the sandbox environment, the non-standard attributes in the custom style are completed with the kernel prefix and the prefix compatibility validity is verified; Based on the host device parameters and the isolation level of the sandbox configuration, conditional style wrapping is added to custom styles to achieve style adaptation at different isolation levels.

5. The sandbox isolation style debugging method based on generative AI technology according to claim 1 is characterized in that: In step S103, Before injecting custom styles into the sandbox environment, scan the styles to detect unsafe style attributes and mark or fix any detected security issues. When a custom style is modified, only the modified style fragment is re-preprocessed and injected into the sandbox environment, rather than the entire style file; When injecting styles, additional scope restrictions are applied to the style so that custom styles only apply to the specified elements or components within the sandbox.

6. The sandbox isolation style debugging method based on generative AI technology according to claim 1 is characterized in that: In step S104, Establish a multi-dimensional rendering performance monitoring system to collect real-time page rendering frame rate, redraw and reflow times, and style calculation time consumption indicators to generate performance evaluation reports; Perform intelligent rendering optimization based on performance evaluation reports, replace or split high-cost styles, and prioritize rendering of critical path elements; Selectively enable rendering mode based on mobile, desktop, and sandbox environment isolation levels; The performance evaluation results are visualized in the debugging interface. Users can locate the rendering status through the performance heat map and apply the system-recommended optimization solution with one click.

7. The sandbox isolation style debugging method based on generative AI technology according to claim 6 is characterized in that: The steps are to replace or split high-loss styles and prioritize rendering key path elements, including: Based on the rendering time and redraw count indicators in the performance evaluation report, set a single style rendering time threshold, mark CSS selectors with nesting levels exceeding the preset number of layers, and rules containing redundant box-shadow properties; Replace complex nested selectors with flat class selectors; merge redundant attributes into a single rule; split animation styles into base styles and incremental styles; Build a critical path element priority model, assign priority weights to elements based on their position in the home screen, user interaction frequency, and style dependencies, and define the rendering order; By comparing the performance evaluation reports before and after optimization and combining them with actual user operation simulations, the effectiveness of the optimization plan can be verified.

8. The sandbox isolation style debugging method based on generative AI technology according to claim 1 is characterized in that: Step S105 specifically includes: When modifying a style using the Style Editor, the editor analyzes the impact of the current modification on other element styles, predicts possible style conflicts, and provides repair suggestions or automatically repairs some conflicts. When the user selects a style property to modify in the style editor, the page area affected by the style property is highlighted in real time in the sandbox page, and a reference line or size indicator is provided; Record every modification operation of the user on the custom style, and support undoing and redoing specific modification operations; Users can preview sandbox pages in multiple simulated device views at the same time. When users modify the style in the style editor, all simulated device views are updated synchronously to show the rendering effect of the style on different devices.

9. The sandbox isolation style debugging method based on generative AI technology according to claim 8 is characterized in that: The steps analyze the impact of the current modification on other element styles, predict possible style conflicts, and provide repair suggestions or automatically repair some conflicts. The specific contents include the following: Building a style dependency graph is based on the adjacency list or adjacency matrix data structure in graph theory; Using historical style conflict data as training samples, we extract the selector type, attribute name, and value range of style rules, and use machine learning models to build a classification model. When the system detects a specific type of style conflict, it searches for a matching fix in the template library based on the conflict pattern; Utilize the rendering engine's public API or a custom layout algorithm to recalculate the layout and style attributes of page elements based on the current page's DOM state and CSS style rules, as well as the user's style modification operations.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the sandbox isolation style debugging method based on generative AI technology as described in any one of claims 1 to 9 are implemented.

Images