Add information on debugging modified remote scripts

[Garbee]

In IRC someone asked about seeing local modifications to a remote file on reload. There is a bug report open for this currently since it is not directly possible. However there is a switcharoo extension that still works which should be mentioned until the bug report is filled since it allows for this kind of behavior to be done.

[paulirish]

I wonder what working people use for this..

"Map Local" was the Charles proxy feature that did this.

Here's two related SO questions: http://stackoverflow.com/questions/23549251/how-to-refresh-a-webpage-with-devtool-js-modifications http://stackoverflow.com/questions/4859689/how-do-i-redirect-to-a-url-using-a-google-chrome-extension-content-script

[paulirish]

switcheraroo does redirect so it doesnt work for HTML. :/

[kdzwinel]

I can't recall exact issue, but at least couple of times when I was helping people debug we had to dump whole page to disk ("Save Page As..") so that we can play with HTML/JS. Sometimes bugs occur on page load and before you mange to open DevTools. Extension that can be helpful in such cases is on my bucket list.

[shmdhussain]

To debug the javascript in my HTML, I am trying to replace the minified version of JS file coming from the network/ server with my local development copy(I am having the dev copy in my local machine which is not minified) using the chromes Dev tool's workspace by right click the network JS file and "mapped to Local resource" with my dev copy which i added to workspace. But i am not able to replace the minified version with dev copy and i am not seeing my local dev copy is running. It shows the error "File is not matched" in a yellow color warning message at the top of the dev tool. Is anyone facing this issue?. Please help me on how to replace the minified version with dev copy using browser dev tool.

[Garbee]

@shmdhussain The DevTools currently does not do resource substitution. It can simply map the remote files to your local copy so if things are kept in sync (like using a local server on-system) then when refreshing your modifications can persist.

[dnakov]

@paulirish @shmdhussain @Garbee I made all this work, but it wasn't easy... https://github.com/dnakov/proxly It's geared towards salesforce.com developers currently (that's just the regex you can change tho.) It works with JS/CSS, HTML template files and even HTML Imports. Even livereload! :)

Chrome App to pick a directory, run a sockets.tcpServer https://chrome.google.com/webstore/detail/proxly/denefdoofnkgjmpbfpknihpgdhahpblh

Chrome Extension to redirect matching webRequests to that web server, add CORS and stuff: https://chrome.google.com/webstore/detail/proxly-extension/ijcjmpejonmimoofbcpaliejhikaeomh