在 Sublime Text 直接运维 Javascript 调节和测量检验调

2019-10-30 10:41 来源:未知

Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript · Chrome

原文出处: ctriphire   

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方)

1、先说一下源码定位

大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

图片 1

我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

图片 2

直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

图片 3

大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

图片 4

这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的定义处,所以没法在此设置断点。

图片 5

设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift F11 步出,跳出当前自定义函数

其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

用图说话(哈哈)

图片 6

 

刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

右击“提交评论”–>审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

JavaScript

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" ); } var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

1
2
3
4
function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

如下图所示:

图片 7

按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

最后介绍一下一个神器,很好用的debugger

如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

赞 1 收藏 评论

图片 8

来源:    感谢作者分享~~·

此文章翻译自developers.google.com/web/tools/chrome-devtools/javascript/reference,是对 chrome 下调试 javascript 的工具和方法介绍。

先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

转载自:

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

调试 js 需要结合浏览器断点操作,具体可见我的上一篇文章: 使用断点调试代码。

图片 9

图片 10

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.


大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个图片 11来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示

sublime text javascript

1. Beautify Javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

图片 12

图片 13

打上断点之后,需要操作对应图标进行调试,图标如下:

图片 14

Sublime Text是深受喜欢的多语言编辑器,很多开发人员都选择它作为自己的主力编辑器进行创作,并且凭借其强大的可扩展性,Sublime Text功能也越来越丰富。
但是有个问题,那就是Sublime Text不支持一些语言的运行,例如javascript,我们通常通过写一个HTML页面来嵌入JS,然后再用Chrome或者Firefox的开发者工具来调试。而实际上我们也可以通过添加Build System的方法来让Sublime Text支持Javascript Console控制台调试。

2. 查看元素绑定了哪些事件

在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的, 点击文件名会直接跳到绑定事件处理函数所在行, 如果 js 是压缩了的, 可以先 Pretty print 下, 然后再查看绑定的事件.

图片 15

图片 16

现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

利用 Node.js 添加 JavaScript 控制台

  1. 先下载并安装Node.js。
  2. 为Sublime Text添加此Build System.
    只需打开Sublime Text,选择 Tools > Build System > New Build System... ,如图所示: 图片 17
    sublime build system

粘贴以下内容

{"cmd": ["node", "$file"],"selector": "source.js"}

并保存为Node.sublime-build,或者其他名字。
保存位置DataPackagesUser文件夹下面

图片 18

node.js build system

  1. 在 Tools > Build System 里选择刚刚创建好的“ Node”,就可以调试了。
    你需要做的就是在写好js文件后,按下Command B按钮。 图片 19
    sublime javascript console

    在Node.js的情况下,使用console.log()函数。

文/dr2009(简书作者)
原文链接:
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints, 点右侧的 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

从左到右分别是:

下面我们用console.log来替换,感受一下它的魅力。

4. 页面事件中断

除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件.

图片 20

Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。

图片 21

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关, 有两种模式:在所有异常处中断, 在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了

Step over next function call:执行到下一步的函数调用(执行当前断点所在行,跳到下一行)。

看了上面这张图,是不是认识到log的强大之处了,下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

6. DOM Level 3 Event 事件中断

在 Elements 面板, 选中一个元素右键, 有两个选项:Break on subtree modifications, Break on attributes modifications, 这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

图片 22

Step into next function call:进入当前函数。

图片 23

7. 所有 js 文件中搜索&查找 js 函数定义

  • 在 chrome developer tool 打开的情况下, 按 ctrl shift F, 在通过 js 钩子查找代码位置时很有用, 查找支持正则表达式
  • 查找函数定义: ctrl shift 0 (在 Scripts panel 下)
  • 查找文件: ctrl o  (在 Scripts panel 下)
  • 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助

图片 24

Step out of current function:跳出当前执行函数。

目前控制台方法和属性有:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]

下面我们来一一介绍一下各个方法主要的用途。

一般情况下我们用来输入信息的方法主要是用到如下四个

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

用图来说话

图片 25

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

图片 26

%o占位符,可以用来查看一个对象内部情况

var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

图片 27

6、console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码**

<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById('mytable');
        console.dirxml(mytable);
    }
</script>

图片 28

7、console.group输出一组信息的开头

8、console.groupEnd结束一组输出信息

看你需求选择不同的输出方法来使用,如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。

图片 29

哈哈,是不是觉得很神奇呀!

9、console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

图片 30

10、console.count(这个方法非常实用哦)当你想统计代码被执行的次数

图片 31

11、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少)直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

图片 32

12、console.time 计时开始

13、console.timeEnd 计时结束(看了下面的图你瞬间就感受到它的厉害了)

图片 33

14、console.profileconsole.profileEnd配合一起使用来查看CPU使用相关信息

图片 34

在Profiles面板里面查看就可以看到cpu相关使用信息

图片 35

15、console.timeLineconsole.timeLineEnd配合一起记录一段时间轴

16、console.trace 堆栈跟踪相关的调试

上述方法只是我个人理解罢了。如果想查看具体API,可以上官方看看,具体地址为:

8. command line api

  • $(id_selector) 这个与页面是否有 jQuery 无关
  • $$(css_selector)
  • $0, $1, $2, $3, $4
    1. Elements 面板中最近选中的 5 个元素, 最后选择的是 $0
    2. 这个 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板, 在断点时复制变量时有用
  • monitorEvents(object[, types])/unmonitorEvents(object[, types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console) 或 点击
  • 更多 command line api 点击

图片 36

Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。

控制台的一些快捷键

1、方向键盘的上下键,大家一用就知晓。比如用上键就相当于使用上次在控制台的输入符号

2、$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的

图片 37

上面的$_需要领悟其奥义才能使用得当,而0 4则代表了最近5个你选择过的DOM节点。

什么意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined

图片 38

3、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节点

图片 39

4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

图片 40

(哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪, 比如记事本, 是不是觉得功能很强大)

5、keys和values前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组

图片 41

说到这,不免想起console.table方法了

图片 42

6、monitor & unmonitor

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

图片 43

看了这张图,应该明白了,也就是说在monitor和unmonitor中间的代码,执行的时候会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。当解除监视(也就是执行unmonitor时)就不再在控制台输出信息了。

  • $ // 简单理解就是 document.querySelector 而已。
  • $$ // 简单理解就是 document.querySelectorAll 而已。
  • $_ // 是上一个表达式的值
  • 0−4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
  • dir // 其实就是 console.dir
  • keys // 取对象的键名, 返回键名组成的数组
  • values // 去对象的值, 返回值组成的数组

下面看一下console.log的一些技巧

1、重写console.log 改变输出文字的样式

图片 44

2、利用控制台输出图片

图片 45

3、指定输出文字的样式

图片 46

最后说一下chrome控制台一个简单的操作,如何查看页面元素,看下图就知道了

图片 47

你在控制台简单操作一遍就知道了,是不是觉得很简单!

9. 实时修改 js 代码生效

  • 页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl S 保存, 会立即生效
  • 注意
    1. 经测试不支持 html 页面中 js 修改
    2. 经过 Pretty print 格式化的脚本不支持修改

Pause on exceptions:异常情况自动断点设置。

10. console 中执行的代码可断点

在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了

图片 48

function hello() {
  alert('say hi');
}
//@ sourceURL=hello.js

Pause/Resume script execution( F8)

在断点暂停后,点击恢复脚本执行,直到下一个断点为止。

长按图标,会出现灰色的播放按钮,鼠标移上去再松开左键,会忽略所有的断点,强制渲染完整的页面。


Step over next function call (F10)

当在一行代码中暂停,代码里包含一个与正在调试的问题无关的函数时,可以点击此图标直接解析该函数,而不是进入函数内部逐行执行debug操作。

例如,当你在 debug 以下代码:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

}

function getName() {

var name = app.first ' ' app.last; // B

return name; // C

}

假设现在是在 A 处暂停。点击 '跳过下个函数调用' 图标,浏览器会解析被跳过的函数里的所有代码(这里是 B 和 C),然后在 D 处再次暂停。


Step into next function call ( F11)

当断点找到了要 debug 的确切函数,点击图标进入此函数内部,逐行查看分析里面的变量值和方法。

例如:

function updateHeader() {

    var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first ' ' app.last; // B

    return name; // C

}

此时在 A 处打点暂停了,而 A 处就是与问题相关的函数,点击进入函数里,会在 B 处暂停,再次点击会在 C 处暂停,同时 B 处会显示 'name' 变量的值。


Step out of current function (Shift F8)

进入到一个与正在 debug 的问题无关的函数后,可以点击此图标解析函数剩下的代码,跳出函数到下一行。

例如:

function updateHeader() {

var day = new Date().getDay();

    var name = getName(); // A

    updateName(name); // D

};

function getName() {

    var name = app.first ' ' app.last; // B

    return name; // C

}

现在在 B 处暂停,step out 之后,浏览器解析 getName() 函数剩下的代码(C),然后在 D 处再次暂停。


Run all code up to a certain line

如果你在 debug 一个很长的函数,里面包含了很多与问题无关的代码,需要区分出来。

首先在函数里设置第一个断点,执行至暂停,然后,有三种方法 debug :

    1、使用 step into function 逐行解析查看结果,会浪费不少时间;

    2、根据结果判断哪些是无用的代码,越过它们再设置下一个断点,使用 resume script 执行到下一个断点;

    3、根据结果判断哪些是无用的代码,在下一个需要暂停的地方,右键行数,选择 “continue to here”,浏览器会直接解析到那一行并暂停,推荐的方法。


View the current call stack

在一行代码里暂停时,可以在 Call Stack 面板查看是哪些栈将你带到了当前断点(到达当前函数调用了哪些函数)。如果不是在一行代码里暂停, Call Stack 面板是没有内容的。

如果要查看异步函数,可以勾选 Async 。(在 windows 版本中没有此选项,默认显示异步函数)。

点击函数会跳到此函数调用的地方。蓝色箭头是当前查看的函数。

图片 49


Copy stack trace

在 Call Stack 面板里右键,选择 Copy stack trace 可以将面板里的 stack 信息复制到 clipboard。

图片 50

复制的信息格式如下(函数名称、在代码里的行数):

getNumber1(get-started.js:35)

inputsAreEmpty(get-started.js:22)

onClick(get-started.js:15)


Restart the top function of the call stack

在调试函数的过程中,想回到函数的开头重新 debug 的时候,可以在 Call Stack 面板中对应的函数上右键,选择 Restart Frame 而无需在开头打断点。Call Stack 面板里是断点函数以及所涉及到的其他函数,最顶端的函数是当前的断点函数。

例如:

function factorial(n) {

    var product = 0; // B

    for (var i = 1; i <= n; i ) {

    product = i;

};

return product; // A

}

现在在 A 处暂停,点击 Restart Frame 之后,会在 B 处暂停。

图片 51


Ignore a script or pattern of scripts

在 debug 过程中,可以选择忽略部分脚本,不在 Call Stack 中显示,在 step into function 的时候也不会进入被忽略的脚本。

例如:

function animate() {

    prepare();

    lib.doFancyStuff(); // A

    render();

}

A 是你确认与当前问题无关的第三方库,那就可以将它关入黑盒子里忽略掉。

在编辑区操作: 在 Source Tab 中双击打开文件 -> 在文件编辑区右键,选择 Blackbox script 。

图片 52

在Call Stack 面板操作: 在 Call Stack 面板中找到对应的脚本 -> 右键选择 Blackbox script 。

图片 53

在控制台设置黑盒: 控制台右上角找到 'Customize and control DevTools' 图标(或按F1) -> 选择 Blackboxing tab -> 点击 Add pattern ->  在对话框中输入脚本名字或脚本名字的正则表达式 -> 点击 Add

图片 54


Change thread context

在网站有 web workers 或者 service workers 线程的时候,需要分别查看主线程和这两个线程的 context ,可以在 Threads 面板切换。

图片 55

上图蓝色箭头处是当前线程的 context , 可以点击切换其他线程。


View and edit local, closure, and global properties

在断点暂停时,可以在 Scope 面板里查看和编辑局部、闭包和全局范围内的属性和变量的值。不会显示不可枚举的属性。

双击一个属性值可以输入新的值。

图片 56


Run snippets of debug code from any page

如果在调试中,需要一次次在控制台输入相同的内容的话,可以使用 Snippets(代码片段) 功能减少重复劳动。代码片段是您在DevTools中编写、存储和运行的可执行脚本。

Snippets 是全局的,在浏览器的所有标签页都能找到和运行。

具体可查看 从任何页面运行代码片段


Watch the values of custom JavaScript expressions

在 debug 过程中,如果希望重点观察某些变量的值(而不是在 Scope 面板里层层点开),可以加入 Watch 面板。Watch 面板里的值会在执行代码时自动刷新。

图片 57

' ' 图标创建新的 expression;右边是刷新图标,手动刷新变量的值;鼠标移动到变量上,在右侧会出现删除图标。


Make a minified file readable

可以将最小化了的代码还原成对人友好的形式。

点击代码编辑区域左下角的 '{}' 图标。

图片 58


Edit a script

如果要尝试修复 bug , 不需要切换到编辑器修改,再刷新当前页面。你可以直接在代码编辑区域修改代码然后保存看看修改后的效果。如果是最小化了的代码,可以先还原成对人友好的格式。

操作: 修改代码 -> 按 Command S (mac)或 Ctrl S (windows, Linux)保存修改 -> 查看效果。

图片 59

版权声明:本文由19463331韦德国际发布于韦德国际1946官网,转载请注明出处:在 Sublime Text 直接运维 Javascript 调节和测量检验调