javascript 在 Chrome 开发者工具中检查 js 变量

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

Inspect js variables in Chrome Developer Tools

javascriptgoogle-chromegoogle-chrome-devtools

提问by drmrbrewer

I've searched extensively but am only more confused than when I started. I have a very simple html+js webpage... html loads my js script, and the js script of course has lots of variables defined and used.

我已经进行了广泛的搜索,但只是比开始时更困惑。我有一个非常简单的 html+js 网页... html 加载我的 js 脚本,并且 js 脚本当然有很多定义和使用的变量。

In Chrome Dev Tools I'm looking for a simple way of browsing all the variables defined and used in my js script, and their current values (with the execution paused).

在 Chrome Dev Tools 中,我正在寻找一种简单的方法来浏览在我的 js 脚本中定义和使用的所有变量及其当前值(执行暂停)。

I've looked in the Scopepanel of the Sourcestab, which looks promising, but I can't see my js variables in the Localpart, and the Globalpart has an almost infinite tree of elements that I don't know where to start looking for variables specifically used in my js.

我查看ScopeSources选项卡的面板,看起来很有希望,但是我在Local部分中看不到我的 js 变量,并且该Global部分有一个几乎无限的元素树,我不知道从哪里开始寻找变量专门用在我的js中。

Code snippets below... so I'd like to find a convenient way of inspecting variables and their values, like datafor example:

下面的代码片段...所以我想找到一种方便的方法来检查变量及其值,data例如:

index.html:

index.html:

<!DOCTYPE html>

<head>
    <script type="text/javascript" src="scripts/main.js"></script>
</head>

<body>
</body>

</html>

main.js:

main.js:

$(document).ready(function() {

    var data = [];

    (function init() {
        $('#dragme').hide();
        var str = 'hello';
        data.push('sample');
        myFn(data, str);
        // more stuff here...
    });

});

回答by Le 'nton

The Google Chrome Breakpointsare what you were looking for. Just click at the line number you want to pause at and the execution stops next time the line is executed. You can then look into each variable in the current state.

谷歌浏览器断点是什么,你所期待的。只需单击要暂停的行号,下次执行该行时就会停止执行。然后,您可以查看当前状态下的每个变量。