11/12/2022 0 Comments Un minify css![]() The unminified flame chart in the Performance tool now shows those functions labeled with more meaningful names taken from your source maps, such as useObserver (d), useQueuedForceUpdateBlock (o), trackDerivedFunction (an), initializeIconColorMap (c), getExtraToolControls (co), and isToggleEnabled (a). If needed, for details, see Load a recording in Performance features reference, and then continue below. In the Open dialog box, select the unminified performance profile. Or, right-click a blank area of the Performance tool, and then select Load profile. In the Performance tool, click the Load profile ( ) icon button. Some of the minified production names might still appear, because source maps don't always provide the necessary information for the Performance tool to map all function names. The Performance tool creates a new version of the recorded performance profile, with some function names from the flame chart replaced by more meaningful function names by using your source maps. Select a filename and directory and then click the Save button. The default directory is the Downloads directory. The default filename is a pattern starting with date and time like yymmddThhmmss, such as: Profile-20220307T164948-unminified.json. In DevTools, a popup briefly appears, reading: Status: creating unminfied file. The flame chart in the Performance tool shows minified function names, such as XI, Gi, d, o, an, c, co, and a from your production code: Look at the function names in the flame chart. In the Performance tool, click in the main area (the flame chart), and use the mouse wheel to zoom in. For details, see Record runtime performance.Ī performance profile is recorded, in the Performance tool. In the Performance tool, click the Record button, to record a performance profile for the page you want to analyze. UN MINIFY CSS CODEWhen unminifying, the Performance tool expects to find your source maps along with your production code.įor details, see Map the processed code to your original source code, for debugging. Host your source maps side-by-side with your production code. To unminify a performance profile, so that some more meaningful function names are shown in addition to the minified identifiers, follow the steps below. These production function names might be obscure and might not easily map to function names in your original source code. However, if your production code is compiled, minified, or bundled, the Performance tool initially displays the function names that are extracted from your transformed, production code. Ideally, in this flame chart view, you want to see the meaningful function names that are shown in your original source code. When recording a performance profile in the Performance tool, the Main section of the profile displays detailed flame charts of JavaScript functions that were called during the recording. By clicking the Unminify button in the Performance tool, you can use source maps to create an unminified version of the performance profile you recorded.Īn example of a performance profile flame chart, with hard-to-read function names:Īn example of a performance profile flame chart, with some more meaningful function names restored: Source mapping is used in DevTools to keep your client-side code readable and debuggable. To see your original function names in the flame chart in the Performance tool, use the Unminify ( ) button. To learn more about how DevTools uses source maps, see Map the processed code to your original source code, for debugging. The Performance tool can use source maps to map minified function names after a recording has been made, back to their original names found in your original code. Source maps map your compiled, minified code to your original source code files. If your build process compiles and minifies your code and combines it into a single file, the names of the functions displayed in a performance profile might be hard to understand. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |