无法在 Chrome 开发者工具中实时编辑 Javascript
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29232701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to Live Edit Javascript in Chrome Developer Tools
提问by Neo
I have done this a million times, i.e open the javascript file in the "Sources" tab, edit and hit CTRL+S to save it, upon which Chrome would confirm the same with a "Recompilation and Update Succeeded".
我已经这样做了一百万次,即在“源”选项卡中打开 javascript 文件,编辑并点击 CTRL+S 以保存它,Chrome 将通过“重新编译和更新成功”确认相同。
But I can no longer do this! There is no confirmation message in the console.
但是我不能再这样做了!控制台中没有确认消息。
Also, the source window turns reddish indicating failure to do so.
此外,源窗口变为红色,表示未能这样做。
The same script is getting edited from a different system.
正在从不同的系统编辑相同的脚本。
I am on Chrome 41.0.2272.101m / WIN8.
我在 Chrome 41.0.2272.101m / WIN8 上。
The script is not "prettified", just to rule that answer out.!
脚本没有“美化”,只是为了排除那个答案。!
回答by micjamking
Try using workspaces: https://developer.chrome.com/devtools/docs/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".
通过在 Sources 的左侧面板中右键单击并选择“将文件夹添加到工作区”,将项目文件夹添加为 devtools 中的工作区。
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.
然后,从工作区的文件夹中选择 javascript 文件。右键单击文件中的任意位置以选择“映射到本地资源”,然后选择与工作区中的当前文件匹配的实时文件。
This should allow you to update your JS file and any saved changes will be applied to the current page without refreshing.
这应该允许您更新您的 JS 文件,任何保存的更改都将应用于当前页面而无需刷新。
回答by David Stolze
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:
我找到了一种无需保存任何内容即可实时编辑网站 JS 的好方法。它也会通过页面重新加载持续存在,但您必须保持开发者控制台打开:
-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)
- 确保以“false”结束该行;以便断点永远不会真正触发(除非您希望它触发)
Example: if the breakpoint condition is "valueToChange=100; false;", every time the execution goes over this line, 'valueToChange' will be set to 100.
示例:如果断点条件为“valueToChange=100;false;”,则每次执行越过这一行,'valueToChange'就会被设置为100。
回答by Kyung Hwan Min
You can refer following link. It shows step by step instruction. https://www.youtube.com/watch?v=PJDPIsOfFZEOne 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.
您可以参考以下链接。它显示了分步说明。 https://www.youtube.com/watch?v=PJDPIsOfFZE我发现的一件事是可以在选项中配置 Chrome 扩展 Jet Brain 插件(右键单击 chrome 扩展中的 JB)。确保端口号与 Intellij 调试端口号匹配。如果你使用 JRebel,它的端口号与 javascript 调试器不同。