在 Google Chrome 中检查 jsfiddle.net 上的 javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5655058/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:55:51  来源:igfitidea点击:

Inspecting javascript on jsfiddle.net in Google Chrome

javascriptgoogle-chromejsfiddlegoogle-chrome-devtools

提问by LeRoy

Is it possible to set breakpoints using the google chrome inspector on javascript code entered into jsfiddle.net?

是否可以使用谷歌浏览器检查器对输入到 jsfiddle.net 的 javascript 代码设置断点?

When I go to the script tab of the developer tools I see lots of scripts but I don't know where my script would be found or if it can be found in there at all. In the past I have just settled for some console.log action but I would love to set some breakpoints.

当我转到开发人员工具的脚本选项卡时,我看到很多脚本,但我不知道在哪里可以找到我的脚本,或者是否可以在那里找到它。过去我刚刚解决了一些 console.log 操作,但我很想设置一些断点。

(If not possible I am interested in other ways of inspecting javascript in this scenario.)

(如果不可能,我对在这种情况下检查 javascript 的其他方式感兴趣。)

回答by Effata

Debugger calls work fine on jsfiddle. Just enter this line where you want to start debugging:

调试器调用在 jsfiddle 上工作正常。只需在要开始调试的地方输入这一行:

debugger;

Debugger is great for starting debug mode in chrome, firebug and even IE dev tools, but you usually need to have the debugger started (ie "start debugging" in IE, open firebug/developer tools).

调试器非常适合在 chrome、firebug 甚至 IE 开发工具中启动调试模式,但您通常需要启动调试器(即在 IE 中“开始调试”,打开 firebug/开发人员工具)。

回答by mVChr

In the Developer Tools, under the Script tab if you select fiddle.jshell.netfrom the dropdown, around line 20-30 (depending on how much CSS you have) you will see a <script>tag that contains the code from the Javascript fiddle window. You can set your breakpoints here.

在开发人员工具中,如果您fiddle.jshell.net从下拉列表中选择脚本选项卡下的第 20-30 行(取决于您拥有的 CSS 数量),您将看到一个<script>包含来自 Javascript 小提琴窗口代码的标签。您可以在此处设置断点。

You can also evaluate code in the Console against this frame by changing the console context:

您还可以通过更改控制台上下文来针对此框架评估控制台中的代码:

回答by dbrin

Another trick is to show your fiddle without the editor using the following syntax:

另一个技巧是使用以下语法在没有编辑器的情况下显示您的小提琴:

<normal path to your fiddle>/show/light/

as an example: jsfiddle-link

例如:jsfiddle-link

回答by hcpl

From the developer console go to tab sources, open the sources tree representation (on the left), open the fiddle.jsshell.netnode, next click _display, next (index)and you should see your code.

从开发人员控制台转到选项卡sources,打开源树表示(在左侧),打开fiddle.jsshell.net节点,然后单击_display,下一步(index),您应该会看到您的代码。

Note that if you save your code this _displayreference will be replaced by fiddle-reference/version/show. For example JsQfE/2/show(which doesn't exist as far as I know but does the job as an example).

请注意,如果您保存代码,则此_display引用将替换为fiddle-reference/version/show. 例如JsQfE/2/show(据我所知,它不存在,但可以作为一个例子)

enter image description here

在此处输入图片说明