![]() ![]() Open the Chrome DevTools' tab Sources and in the left hand pane open a file that interests you. The same technique can be applied to override also HTML files, not only JS ones.įor more, see the official Chrome DevTools docs on the Local network overrides.Īppendix: Pretty print and debug minified JS code And after you refresh the page, your customized source code should be used instead of the default one! This way you can for instance conveniently try out an idea of a possible bugfix in the production website, without a need to deploy a new version of code, but just make edits locally in your browser! So now you can edit this file and save your changes many times with pressing the hotkey Cmd+S. You might notice a small pink dot near the icon of this filename - it's signaling that your local version will take precedence over the default source code (but only after the page refresh). Then you can edit any source file of the website! Just right-click at any source code filename and from the opened contextual menu please select the option Save for overrides. It suffices that you enable this feature once.ĭon't worry when you see that your Network tab now shows a warning sign "⚠️" - it only indicates that some of the files might be now replaced by your customized versions: ![]() in Visual Studio Code) and then type Enable override network requests, and hit Enter. Here's how to do it quickly: in DevTools window open the command palette by pressing the hotkey Cmd+Shift+P (similar to what you would do e.g. ![]() To edit any file of any website, you need to first make sure you have enabled the feature of Chrome DevTools called local overrides. Thanks to that, you can not only conveniently inspect the production code of any website, but also comfortably even try out an idea of a possible bugfix in this production code without a need to deploy the updated version of code, but just making edits locally in your browser! You just need to enable the hidden feature of Devtools, called local overrides. Chrome DevTools allows not only for pretty formatting and debugging the minified JS code of any production website, but also (which was surprising to me!) gives you ability to edit this production code in your browser on the fly! You can apply your custom local edits to any source JS file and after the next page refresh your code will run instead of the default one. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |