blocks|key|3150772|text|实际上chrome允许这样做，在开发人员工具窗口的源标签中选择HTML文件。您将看到HTML而不是javascript，并且只需在<script>标记中添加断点。您还可以添加debugger;命令来编写要调试的脚本。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3150773|<script>
+//+some+code
+debugger;+//+This+is+your+breakpoint
+//+other+code+you+will+able+to+debugg
</script>|code-block|syntax|javascript|3150774|当你想发布你的网站时，不要忘了删除debugger;。|3150775|entityMap^0|P|1|1T|8|2F|9|0|0|H|9|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|D]|$9|U|A|V|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|W|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|X|8|@$9|Y|A|Z|B|D]]|E|@]|F|$]]|$1|N|3|-4|5|6|7|10|8|@]|E|@]|F|$]]]|O|$]]

Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <code>&lt;script&gt;</code> tags. Also you can add <code>debugger;</code> command to script what you want to debug. For example:

<pre><code>&lt;script&gt;
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
&lt;/script&gt;
</code></pre>

Don't forget to remove <code>debugger;</code>'s when you want to release your website.

blocks|key|3150806|text|转到Elements选项卡，找到您的脚本，右键单击您需要的部分，然后选择"Edit+as+HTML“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3150807|如果没有显示Edit+as+HTML，双击该节点，它应该会高亮显示并可编辑。|3150808|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".

If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.

blocks|key|251559|text|我很难找到包含我的内联/嵌入式javascript的文件。对于其他有同样问题的人来说，这可能会有帮助，也可能没有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|251560|在Windows上使用Chrome+21.0.1180.89+m|offset|length|style|BOLD|251561|​|251562|📷|atomic|251563|251564|所有的文件都是在点击这个非常谨慎的按钮后显示的。请参见：|251565|251566|251567|251568|现在你可以开始调试了。|251569|251570|251571|251572|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/24f0f322d07ef7545168f4efccdac7b3.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/e611450a8924dd6d1a3cbfabdef90c28.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/f7ea95ffffb5f31346edade1d189d15c.png^0|0|B|L|0|0|1|0|0|1|0|1|0|0|0|1|0|0|S|0|0|1|0|0|1|0|1|1|0|0|1|0|0|B|0|0|1|0|0|1|0|1|2|0|0|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1H|8|@$D|1I|E|1J|F|G]]|9|@$D|1K|E|1L|1|1M]]|A|$]]|$1|M|3|I|5|6|7|1N|8|@$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1Q|8|@$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|P|3|I|5|6|7|1T|8|@$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|Q|3|K|5|L|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@$D|1Z|E|20|1|21]]|A|$]]|$1|R|3|I|5|6|7|22|8|@$D|23|E|24|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|25|8|@$D|26|E|27|F|G]]|9|@]|A|$]]|$1|U|3|I|5|6|7|28|8|@$D|29|E|2A|F|G]]|9|@]|A|$]]|$1|V|3|K|5|L|7|2B|8|@$D|2C|E|2D|F|G]]|9|@$D|2E|E|2F|1|2G]]|A|$]]|$1|W|3|I|5|6|7|2H|8|@$D|2I|E|2J|F|G]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|10|11|12|A|$13|17|15|-4]]|18|$5|10|11|12|A|$13|19|15|-4]]]]

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...

Using Chrome 21.0.1180.89 m for Windows

<img src="https://i.stack.imgur.com/vR5qk.png" alt="enter image description here">

All files are shown after clicking that very discreetly placed button. See:

<img src="https://i.stack.imgur.com/H2GE9.png" alt="enter image description here">

Now you may begin debugging...

<img src="https://i.stack.imgur.com/rsJU5.png" alt="enter image description here">

blocks|key|3150933|text|这些答案对我来说都不管用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3150934|对我来说起作用的是，如果我已经在页面上加载了我的javascript，我可以复制该javascript，编辑它，然后将其粘贴到控制台中，它将重新定义任何函数或任何需要重新定义的内容。|3150935|例如，如果页面具有：|3150936|<script>
var+foo+=+function()+{+console.log("Hi");+}
</script>|code-block|syntax|javascript|3150937|我可以在脚本之间获取内容，编辑它，然后将其输入到调试器中，如下所示：|3150938|foo+=+function()+{+console.log("DO+SOMETHING+DIFFERENT");+}|3150939|这对我来说很管用。|3150940|或者如果你喜欢的话，|3150941|function+foo()+{
++++doAThing();
}|3150942|你可以直接输入|3150943|function+foo()+{
++++doSomethingElse();
}|3150944|而foo将被重新定义。|3150945|可能不是最好的解决方法，但它是有效的。|3150946|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|1C|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1E|8|@]|9|@]|A|$I|J]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

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.

for instance, if the page has:

<pre><code>&lt;script&gt;
var foo = function() { console.log("Hi"); }
&lt;/script&gt;
</code></pre>

I can take the content between the script, edit it, then enter it into the debugger like:

<pre><code>foo = function() { console.log("DO SOMETHING DIFFERENT"); }
</code></pre>

and it will work for me.

Or if you have like, 

<pre><code>function foo() {
 doAThing();
}
</code></pre>

You can just enter 

<pre><code>function foo() {
 doSomethingElse();
}
</code></pre>

and foo will be redefined.

Probably not the best workaround, but it works.

blocks|key|251604|text|此处介绍的解决方案：https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|251605|在内联/嵌入式脚本中添加'sourceURL‘指令，如下所示：|251606|<script+type="text/javascript">
...script+here...
//#+sourceURL=helperJavaScript.js
</script>|code-block|syntax|javascript|251607|然后，此脚本将出现在页面源代码中，您可以像从URL源加载的js一样对其进行调试和编辑|251608|📷|atomic|251609|​|251610|entityMap|0|LINK|mutability|MUTABLE|url|https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fd8bdce98381445f6f6a7f1d7e27b7f1.png|imageAlt^0|A|2C|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|P|3|Q|5|6|7|1G|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|10|V|11|C|$12|13|14|-4]]]]

Solution described here: <a href="https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript" rel="nofollow noreferrer">https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript</a>

Add the 'sourceURL' directive in your inline/embedded script like this:

<pre><code>&lt;script type="text/javascript"&gt;
...script here...
//# sourceURL=helperJavaScript.js
&lt;/script&gt;
</code></pre>

Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source
<a href="https://i.stack.imgur.com/mwO5p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mwO5p.png" alt="enter image description here"></a>

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:

<pre><code>&lt;script type="text/javascript&gt; 
// code here that I want to debug/edit
&lt;/script&gt; 
</code></pre>

This is a big problem for me as I have quite a bit of embedded javascript in a certain page.

Similar to this question: <a href="https://stackoverflow.com/questions/4764245/edit-javascript-blocks-of-web-page-live">Edit JavaScript blocks of web page... live</a> but this is about firefox, not chrome.

How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?

Using Google Chrome to debug and edit javascript embedded in HTML page

调试器

Windows

如果javascript在.js文件中，Chrome开发人员工具允许您在浏览器中编辑javascript。然而，它似乎不允许我编辑嵌入在HTML页面中的javascript。即：<script type="text/javascript> // code here that I want to debug/edit</...

问用Google Chrome调试和编辑嵌入HTML页面的javascript
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用Google Chrome调试和编辑嵌入HTML页面的javascriptEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用Google Chrome调试和编辑嵌入HTML页面的javascript
EN