在Chrome Developer Tools中检查js变量

drm*_*wer 11 javascript google-chrome google-chrome-devtools

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

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

我查看ScopeSources选项卡的面板,看起来很有前途,但是我看不到部件中的js变量Local,而且Global部件有一个几乎无限的元素树,我不知道从哪里开始寻找变量专门用于我的js.

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

index.html:

<!DOCTYPE html>

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

<body>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

main.js:

$(document).ready(function() {

    var data = [];

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

});
Run Code Online (Sandbox Code Playgroud)

Le *_*ton 6

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