Unable to Live Edit Javascript in Chrome Developer Tools

余生长醉 提交于 2019-12-04 02:09:55

Try using workspaces: https://developer.chrome.com/devtools/docs/workspaces

Add the project folder as a workspace in devtools by right-clicking in the left panel in Sources and choosing "Add Folder to Workspace".

Afterwards, select the javascript file from the folder in your workspace. Right-click anywhere within the file to choose "Map to Local Resource" and select the live file that matches the current file in your workspace.

This should allow you to update your JS file and any saved changes will be applied to the current page without refreshing.

I figured out a nice way to live edit a website's JS WITHOUT having to save anything. It also persists through page reloads, but you have to keep the developer console open:

-Add a breakpoint where you want to insert code.

-Edit this breakpoint and add whatever changes you want to have made.

-Make sure to end the line with "false;" so that the breakpoint never actually triggers (unless you want it to trigger)

Example: if the breakpoint condition is "valueToChange=100; false;", every time the execution goes over this line, 'valueToChange' will be set to 100.

You can refer following link. It shows step by step instruction. https://www.youtube.com/watch?v=PJDPIsOfFZE One thing I found is that Chrome extension Jet Brain plugin can be configured at option (right click on JB at chrome extension). Make sure the port number matches with Intellij debug port number. If you use JRebel, its port number is different from javascript debugger.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!