使用谷歌浏览器调试和编辑嵌入在 HTML 页面中的 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7497913/
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
Using Google Chrome to debug and edit javascript embedded in HTML page
提问by Mark Robinson
Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:
如果 javascript 位于 .js 文件中，Chrome 开发人员工具允许您在浏览器中编辑 javascript。但是，它似乎不允许我编辑嵌入在 HTML 页面中的 javascript。IE：
<script type="text/javascript>
// code here that I want to debug/edit
</script>
This is a big problem for me as I have quite a bit of embedded javascript in a certain page.
这对我来说是一个大问题，因为我在某个页面中有相当多的嵌入式 javascript。
Similar to this question: Edit JavaScript blocks of web page... livebut this is about firefox, not chrome.
类似于这个问题：Edit JavaScript blocks of web page... live但这是关于 Firefox，而不是 chrome。
How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?
如何使用 Google Chrome 开发人员工具编辑嵌入在 HTML 页面中的 javascript？
采纳答案by antyrat
Actually chrome allows to do that, choose HTML files in Sourcestab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script>tags. Also you can add debugger;command to script what you want to debug. For example:
实际上 chrome 允许这样做，在开发人员工具窗口的源选项卡中选择 HTML 文件。您将看到 HTML 而不是 javascript，只需在<script>标签中添加断点即可。您也可以添加debugger;命令来编写要调试的脚本。例如：
<script>
// some code
debugger; // This is your breakpoint
// other code you will able to debugg
</script>
Don't forget to remove debugger;'s when you want to release your website.
debugger;当您想发布您的网站时，不要忘记删除's。
回答by Theo
I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...
我很难找到包含内联/嵌入式 javascript 的文件。对于其他有同样问题的人，这可能有帮助，也可能没有帮助...
Using Chrome 21.0.1180.89 m for Windows
在 Windows 上使用Chrome 21.0.1180.89 m
All files are shown after clicking that very discreetly placed button. See:
单击那个非常谨慎放置的按钮后，将显示所有文件。看：
Now you may begin debugging...
现在你可以开始调试了...
回答by byronaltice
None of these answers have worked for me.
这些答案都不适合我。
What works for me is if I have my javascript on the page already loaded, I can copy that javascript, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.
对我有用的是，如果我已经在页面上加载了 javascript，我可以复制该 javascript，编辑它，然后将其粘贴到控制台中，它会重新定义任何函数或任何我需要重新定义的东西。
for instance, if the page has:
例如，如果页面有：
<script>
var foo = function() { console.log("Hi"); }
</script>
I can take the content between the script, edit it, then enter it into the debugger like:
我可以在脚本之间获取内容，对其进行编辑，然后将其输入到调试器中，例如：
foo = function() { console.log("DO SOMETHING DIFFERENT"); }
and it will work for me.
它对我有用。
Or if you have like,
或者如果你有喜欢的，
function foo() {
doAThing();
}
You can just enter
你可以输入
function foo() {
doSomethingElse();
}
and foo will be redefined.
并且 foo 将被重新定义。
Probably not the best workaround, but it works.
可能不是最好的解决方法，但它有效。
回答by brimble2010
Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".
转到 Elements 选项卡，找到您的脚本，右键单击您需要的部分并选择“Edit as HTML”。
If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.
如果 Edit as HTML 没有出现，请双击该节点，它应该会突出显示并可编辑。
回答by Ioannis K. Moutsatsos
Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
此处描述的解决方案：https: //greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript
Add the 'sourceURL' directive in your inline/embedded script like this:
在您的内联/嵌入式脚本中添加“sourceURL”指令，如下所示：
<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>
Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source
然后这个脚本会出现在页面 Sources 中，你可以像从 URL 源加载的 js 一样调试和编辑它
