专栏首页CSDN技术头条由浅入深学习JavaScript Debug技巧

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本文讲述很多内容,所以有些部分并没有讲得很细。

在开始之前,做一些基本的准备:

  • 这是针对浏览器运行的JavaScript,而不是Node.js;
  • 你需要有一定的编写JavaScript的基础;
  • 你需要在概念上知道Debug是什么;
  • 你最好动起手来,边看边操作。

注意:1. 你最好打开两个窗口,一边看一边操作来学习;2. 本文的主要目的是教会你debug,文中的JavaScript代码并不规范,不要学坏啦。

警告(alert)

使用警告(alert)会弹出一个对话框显示特定的警告信息,并且有一个OK按钮。如果你点击OK,该对话框消失。

alert("Hello! I am an alert.");

这一招蛮有用的,你可以将想要查看的值通过alert显示出来。

// 通过alert来确认代码执行的位置 alert("I am here!"); // 显示foo的值 alert("Foo: " + foo);

但如果你不小心将alert放在了for循环中,那就惨了。我曾经就遇到过,不得不强行将浏览器关闭。

// 除非你喜欢alert, 不要这样做! for (i = 0; i < 100; i++) { alert(i); }

好在,如今的谷歌浏览器已经帮你考虑到这一点。如果你不小心弄出了很多alert,谷歌浏览器会识别出来并建议你将它们都阻止。

曾经,alert是大家非常常用的debug工具。不过,使用alert局限性太大,它只能显示字符串。

// 显示所有的h2标签内容 alert($('h2'));

然而,并不会显示出来:

既然这么不好用,为啥你还要讲呢?因为我们可能有时候不得不使用这样旧式的技巧。我最近一次使用alert是我在debug一个移动设备的时候现有的技巧无法正常工作,我只好用alert。

开发者工具

欢迎来到未来!哈哈,并不是这样。开发者工具已经使用了好些年了。不过呢,很多新的特性被加进去,相信不少人都不知道或则不清楚怎么使用。对于JavaScript debug来说,开发者工具真的非常有用。接下来我来介绍如何使用它。

首先,你需要知道如何打开它。你可以使用快捷键:

  • Window/Linux: ctrl + shift + I;
  • OSX: cmd + opt + I

你也可以从谷歌浏览器的菜单栏选择开发者工具选项来打开:

你还可以直接右键,选择检查来打开:

打开后,如下所示:

控制台(Console)

在使用JavaScript做开发的时候,控制台非常有用。当使用C, C++, Java开发的时候,我们可以使用终端(terminal)来debug,控制台拥有和终端相似的功能。

错误

控制台显示JavaScript错误。

同时,也显示了错误在源代码中的位置。点击(index):150就可以跳转到源代码去。

<input type="button" onclick="alert(THE SPICE MUST FLOW);" value="Click to create an error">

这行代码有错误,你知道哪里出问题了吗?

命令行

控制台拥有的交互式命令行可以用来debug。下面是一些例子:

你可以做一些基础的JavaScript编程

// 数学加法 2 + 2 // 字符串拼接 "the golden " + "path" // 调用alert alert("Muad'Dib!");

你也可以执行复杂的JavaScript代码

// 创建变量 var arr = [1, 2, 3]; // 使用shitf+enter键来换行 for (var i = 0; i < arr.length; i++) { arr[i] = arr[i] * 2; } arr;

控制台本身也提供了很多有用的函数,详情参考api文档(https://developer.chrome.com/devtools/docs/commandline-api)。

// 通过css选择器获取元素 $$('h2'); // 甚至XPath $x('//h2');

你可以访问本页面加载的所有库。比如,jQuery:

// 页面背景色变红 $('body').css('background-color', 'red'); // 改回去 $('body').css('background-color', '');

你可以获取当前环境下的变量。

// 当前的this this;

console.log

console.log在控制台打印信息。

console.log("I am logging to the console.");

我们可以使用它做到之前alert可以实现的功能:

// 确认代码当前执行位置 console.log("I am here!"); // 打印变量值 console.log("Foo: " + foo);

而且,我们可以用for循环将所有的值打印出来:

for (i = 0; i < 100; i++) { console.log(i); }

alert只能显示字符串,console.log就强大多了:

// 可以输出DOM元素 console.log($('h2')); // 可以显示对象 console.log({ book: "Dune", characters: ["Paul", "Leto", "Jessica", "Chani", "sandworms"] });

这仅仅是个开始。使用console.log你可以做很多事情,请参考api文档(https://developer.chrome.com/devtools/docs/console-api)。

控制台打印日志已经基本上可以应付日常debug需求了,所以很多开发者止步于此。其实,我们还有更加高级、更加方便的方法。

交互式Debugger

谷歌开发者工具提供了一个交互式debugger。我发现对于复杂的JavaScript代码,特别是自己编写的代码和其它库有交互的时候,特别有用。

你可以再代码中通过调用debugger来开启debug。

// 从这里开始debug debugger;

只有在打开开发者工具的时候,debugger才会起作用。如果你将开发者工具面板关闭,将不会收到任何影响。

如果你点击继续按钮(右侧蓝色的类似于播放的按钮),代码会继续执行直到下一个断点。

如果你点击跳过按钮(继续按钮的右侧,第二个),它会直接执行当前函数,而不是进入函数内部。

如果你想知道makeItColor函数具体如何执行,点击进入按钮(第三个),就会跳入函数内部。如果你想跳出来,那么点击第跳出按钮(第四个)。

如果想查看变量的值,可以选中并把鼠标放在上面:

你可以敲击ESC键来快速打开控制台,再次敲击ESC,控制台消失。

你可以手动在代码的某一行添加断点来暂停执行。在第31行的左侧鼠标单击,会出现一个断点符号。

库和压缩代码

有时候,为了debug,你可能需要查看库函数的源代码。但是,一般线上的代码都是经过压缩的,很难看懂。比如jQuery:

如果你点击下方的{}按钮,可以将代码适当格式化,但是依然很难看懂。

压缩代码在生产环境十分有必要,但是却十分为难debug。好在,大多数库都提供非压缩版本的代码。所以,你可以在开发中引用非压缩版,线上引用压缩版。

<!-- 线上 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <!-- 开发 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>

在线上环境中,如果用户遇到bug如何才能知道呢?推荐你使用fundebug监控服务(https://fundebug.com/)。

Ajax请求

开发者工具的网络部分对于解决网络请求相关问题非常有用。

我用Twitter来举例。

  • 到@horse_js(或则其它页面)
  • 打开开发者工具
  • 点击Network标签
  • 点击filter图标
  • 选中XHR(XMLHttpRequest), 将所有网络请求筛选出来

往下滑动触发网络请求。Headers标签显示该请求的一些基本信息:

Preview显示的是经过浏览器格式化的返回结果(Response)。

Response是原始的返回数据。

Cookies显示请求相关的cookies信息。

Timing显示请求的时间信息。

性能

Debug JavaScript的性能需要很多篇幅去介绍。在这里,给出一些参考资料:

  • jsPerf(http://jsperf.com/)
  • Evaluating network performance(https://developer.chrome.com/devtools/docs/network)
  • Performance profiling with the Timeline(https://developer.chrome.com/devtools/docs/timeline)
  • Profiling JavaScript Performance(https://developer.chrome.com/devtools/docs/cpu-profiling)
  • JavaScript Memory Profiling(https://developer.chrome.com/devtools/docs/javascript-memory-profiling)

移动端

你可以使用开发者工具来模拟移动交互,这样就可以直接在桌面浏览器debug。如果想了解更多,查看文档(https://developer.chrome.com/devtools/docs/mobile-emulation)。

当然,你很可能需要真机调试,可以参考下面的文章:

  • Remote Debugging Chrome on Android(https://developer.chrome.com/devtools/docs/remote-debugging)
  • Quick Tip: Using Web Inspector to Debug Mobile Safari(http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787)

本文分享自微信公众号 - CSDN技术头条(CSDN_Tech),作者:Fundebug

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深度学习应用大盘点

    当首次介绍深度学习时,我们认为它是一个要比机器学习更好的分类器。或者,我们亦理解成大脑神经计算。 第一种理解大大低估了深度学习构建应用的种类,而后者又高估了它的...

    CSDN技术头条
  • 基于DNN和红外热成像的黑暗环境人脸识别工具

    一所德国大学的两位科学家研制出一种能够在完全黑暗环境下识别人脸的工具。这项技术根据人脸的热效应来识别,并将红外热成像和普通的照片做匹配。它采用了深度神经网络系统...

    CSDN技术头条
  • Kaggle 数据挖掘比赛经验分享

    Kaggle 于 2010 年创立,专注数据科学,机器学习竞赛的举办,是全球最大的数据科学社区和数据竞赛平台。笔者从 2013 年开始,陆续参加了多场 Kagg...

    CSDN技术头条
  • Milvus开源向量搜索引擎,轻松搭建以图搜图系统

    当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择...

    ZILLIZ
  • 编程能力突飞猛进的奥秘!戳~

    为什么写这篇博客? 因为我刚买了新键盘,迫不及待想体验下打字6的飞起的感觉,嗯,新键盘还不错。前几天看到在知乎上看到一个问题:

    用户1081422
  • C++核心准则ES.74:尽量在循环变量初始化表达式中定义循环变量​

    Limit the loop variable visibility to the scope of the loop. Avoid using the loo...

    面向对象思考
  • DELPHI中自适应窗体的实现

    我们知道,屏幕分辨率的设置影响着表单布局,假设你的机器上屏幕分辨率是800*600,而最终 要分发应用的机器分辨率为640*480,或1024*768,这样你原...

    Vaccae
  • 开源自动化测试平台TestDog

    最近工作不是很饱和,为了充实自己于是有了搭建自动化平台的想法,希望把公司内部所有API、性能、功能自动化都统一起来管理,目前第一版主体功能基本已完成,特此记录下...

    wencheng
  • 腾讯云直播 新年新定价!

    ? ? 随着新年的倒计时,2019年终于来临。过去的一年里,腾讯云直播不断地进行功能的迭代更新和技术的升级,竭力为客户提供更加优质、稳定、安全的直播服务。 感...

    腾讯云视频
  • 使用Httrack和Tomcat快速搭建本地钓鱼网站

    钓鱼网站是黑客或恶意攻击者通过对源网站的复制、模仿等行为所构造的与愿网站相似度极高的网站,从而通过这种相似度极高的网站窃取用户信息。 ? 那么生成一个钓鱼网站是...

    FB客服

扫码关注云+社区

领取腾讯云代金券