Chrome 调试技巧(小结)

写在前面

本文包括浏览器调试,不包括web移动端调试。

本文调试均在chrome浏览器进行

alert

这个不用多说了,不言自明

console基本输出

想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:

console.log("打印字符串");//在控制台打印自定义字符串
console.error("我是个错误");//在控制台打印自定义错误信息
console.info("我是个信息");//在控制台打印自定义信息
console.warn("我是个警告");//在控制台打印自定义警告信息
console.debug("我是个调试");//在控制台打印自定义调试信息
cosole.clear();//清空控制台(这个下方截图中没有)

注意上面输出的error和throw出的error不一样,前者只是输出错误信息,无法捕获,不会冒泡,更不会中止程序运行。

格式化输出

除此以外,console还支持自定义样式和类似c语言的printf形式

console.log("%s年",2016);//%s表示字符串
console.log("%d年%d月",2016,11);//%d表示整数
console.log("%f",3.1415926);//%f小数
console.log("%o",console);//%o表示对象

console.log("%c自定义样式","font-size:30px;color:#00f");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

DOM输出

下面几个比较简单的,就不举例子了,简单说一下:

var ul = document.getElementsByTagName("ul");
console.dirxml(ul); //树形输出table节点,即<table>和它的innerHTML,由于document.getElementsByTagName是动态的,所以这个得到的结果肯定是动态的

对象输出

var o = {
 name:"Lily",
 age: 18
};
console.dir(obj);//显示对象自有属性和方法

对于多个对象的集合,你可以这样,输出更清晰:

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);

成组输出

//建立一个参数组
console.group("start"); //引号里是组名,自己起
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");

函数计数和跟踪

function fib(n){ //输出前n个斐波那契数列值
 if(n == 0) return;
 console.count("调用次数");//放在函数里,每当这句代码运行输出所在函数执行次数
 console.trace();//显示函数调用轨迹(访问调用栈)
 var a = arguments[1] || 1;
 var b = arguments[2] || 1;
 console.log("fib=" + a);
 [a, b] = [b, a + b];
 fib(--n, a, b);
}
fib(6);

注:Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。

计时

console.time() //计时开始
fib(100); //用上述函数计算100个斐波那契数
console.timeEnd() //计时结束并输出时长

断言语句,这个c++调试里面也经常用到。js中,当第一个表达式或参数为true时候什么也不发生,为false时终止程序并报错

console.assert(true, "我错了");
console.assert(false, "我真的错了");

性能分析

function F(){
 var i = 0;
 function f(){
  while(i++ == 1000);
 }
 function g(){
  while(i++ == 100000);
 }
 f();
 g();
}
console.profile();
F();
console.profileEnd();

注:Chrome开发者工具中的Audits标签页也可以实现性能分析。

debugger

这个重量级的是博主最常用的,可能是c++出身,对于单步调试由衷的热爱。单步调试就是点一下,执行一句程序,并且可以查看当前作用域可见的所有变量和值。而debugger就是告诉程序在那里停下来进行单步调试,俗称断点。

右边按钮如下:

  • Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)。
  • Step over next function call:执行到下一步的函数调用(跳到下一行)。
  • Step into next function call:进入当前函数。
  • Step out of current function:跳出当前执行函数。
  • Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)。
  • Pause on exceptions:异常情况自动断点设置。

其实右侧还有很多强大的功能

  1. Watch:Watch表达式
  2. Call Stack: 栈中变量的调用,这里是递归调用,肯定是在内存栈部分调用。
  3. Scope:当前作用域变量观察。
  4. BreakPoints:当前断点变量观察。
  5. XHR BreakPoints:面向Ajax,专为异步而生的断点调试功能。
  6. DOM BreakPoints:主要包括下列DOM断点,注册方式见下图

当节点属性发生变化时断点(Break on attributes modifications)

当节点内部子节点变化时断点(Break on subtree modifications)

当节点被移除时断点(Break on node removal)

Global Listeners:全局事件监听

Event Listener Breakpoints:事件监听器断点,列出了所有页面及脚本事件,包括:鼠标、键盘、动画、定时器、XHR等等。

chrome中的调试技巧

1、DOM元素的控制台书签

Chrome开发者工具和Firebug都提供了书签功能,用于显示你在元素标签页(Chrome)或HTML标签页(Firebug)中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素,那么&dollar;0 表示C元素,&dollar;1 表示B元素,&dollar;2 表示A元素。(这个和正则表达式的&dollar;符号类似,不过顺序不同)

  • 如果你想调试f函数,用debug(f)语句可以增加这种断点。
  • Sources标签页左侧面板上有一个代码片段(Snippet)子标签页,可用于保存代码片段,帮你调试代码。
  • 可以用Chrome开发者工具Sources标签页中的格式化按钮(Pretty Print Button)格式化压缩后的代码。
  • 在Network面板,选择一个资源文件,右键Copy Response可快速复制响应内容。
  • 利用媒体查询,这个主要是在Device Mode调节不同的分辨率显示。
  • 选择Elements,按 Esc > Emulation > Sensors进行传感器模拟。
  • 点击渐入效果样式图标(紫色图标),可以预览动画效果,并可对相应的贝塞尔曲线(cubic-bezier)进行调节动画效果。
  • 在Source中按住Alt键并拖动鼠标进行多列内容选择。
  • Elements面板右键执行DOM元素节点,选择Force Element State或者点击右侧Toggle Element State图标可以出发伪类。
  • Network面板中选择一张图片,在右侧图片上鼠标右键选择copy it as a Data URI,就可以获取图片的Data URL (base64编码)。
  • 通过按住Ctrl键可以添加多个编辑光标,同时对多处进行编辑。按下Ctrl + U可以撤销编辑。
  • Elements面板右侧的Style编辑器中,点击颜色十六进制编码前的小色块,会弹出一个调色板。
  • 按下Alt键并且鼠标双击选择DOM元素前面的箭头,就会展开该DOM元素下的所有字节点元素.
  • 快捷键:
    • 快速定位到行:快捷键Ctrl+O(Mac:CMD+O),输入:行号:列号 来进行定位
    • 元素搜索:快捷键Ctrl+F(Mac:CMD+F),试试在搜索栏输入ID选择符或者类选择符就可以定位到元素啦

1.避免记录引用类型

当记录对象或数组时,永远记得你在记录什么。记录原始类型时,使用带断点的watch表达式。如果是异步代码,避免记录引用类型。

var arr = [{ num: 0 }];
setInterval(function(){
console.log(arr);
arr[0].num += 1;
}, 1000);

这里,第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时,num的值就已经确定了。之后无论你对同一个引用重新打开多少次都不会变化。

2.尽可能使用 source map。有时生产代码不能使用source map,但不管怎样,你都不应该直接对生产代码进行调试。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Chrome浏览器控制台console使用详解

    Chrome自带的开发者工具提供了强大的调试系统,除了可以用来查看DOM tree结构.CSS样式调试.动画调试和JS代码断点调试等.今天不聊别的,就聊聊使用console调试那些事儿. 在使用React.Vue等需要编译语法的前端框架开发时,前端调试已经变得不那么容易,除了使用React Dev Tools,Vue Dev Tools和Redux Dev Tools等Chrome插件,就是一堆的 console.log() 来打印我们需要看到的变量,虽然也有用,但是比较单一,要调试复杂数据需要

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • 通过chrome浏览器控制台(Console)进行PHP Debug的方法

    效果如下图 PHP Console是一款可以帮助用户模拟真实的PHP网站运行环境,帮助用户使用Chrome插件对PHP代码进行调试的Chrome插件,用户在Chrome中安装了PHP Console插件以后,可以在自己的PHP项目中引用PHP Console项目代码,并输出调试信息,让PHP Console插件进行捕获,这样在网站发布成功以后,还可以使用PHP Console插件进行输出调试信息到Chrome浏览器中,用户可以通过PHP Console插件来查看这些来自于PHP服务器发来的调试日

  • 9种使用Chrome Firefox 自带调试工具调试javascript技巧

    我们调试Javascript一般会用到Chrome或Firefox自带的调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们,让我们花更少的时间来解决错误和bug,从而提高开发效率. 1. debugger 除了console.log, debugger是我们最喜欢.快速的调试工具.执行代码后,Chrome会在执行时自动停止.你甚至可以把它封装成条件,只在需要时才运行. if (thisThing) { debugger; } 2. 用表格显示对象 有时, 有一组复杂的对象要查看

  • 基于Python开发chrome插件的方法分析

    本文实例讲述了基于Python开发chrome插件的方法.分享给大家供大家参考,具体如下: 谷歌Chrome插件是使用HTML.JavaScript和CSS编写的.如果你之前从来没有写过Chrome插件,我建议你读一下这个.在这篇教程中,我们将教你如何使用Python代替JavaScript. 创建一个谷歌Chrome插件 首先,我们必须创建一个清单文件:manifest.json. { "manifest_version": 2, "name": "Py

  • Chrome开发者工具9个调试技巧详解

    对于我们前端开发者来说,Chrome自带的开发者工具绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而Chrome自带的开发者工具其实很强大,下面我们来聊聊一些你可能不知道的使用方法. Scroll Into View 滚动如视图内 在Elements 标签中,查看页面元素的时候,如果当前这个元素不在视图内,可以通过这个方法让这个元素快速滚入视图中. 操作: 在Elements 标签页中选择一个不在视图内的元素 右击,选择Scrollintoview Copy As Fet

  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

  • 详解Chrome 实用调试技巧

    如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆. 介绍Chrome调试技巧的文章很多,本文结合我自己的开发经验,希望从实际运用的角度为大家再一次谈一谈这些功能,也希望对大家都有所帮助和启发. 常用快捷键 ctrl+p项目中定位文件,以下查找

  • Chrome 调试技巧(小结)

    写在前面 本文包括浏览器调试,不包括web移动端调试. 本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console基本输出 想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法: console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定义错误信息 console.info("我是个信息");//在控制

  • Intellij IDEA的一些调试技巧(小结)

    程序员的工作内容,除了大部分时间写代码之外,因为有不少的时间是用在调试代码上.甚至说不是在调试代码,就是即将调试代码. :) 今天我们来谈谈调试代码的一些技巧,在使用IDE提供的debugger时一些快速定位问题的方式. 看到这里的朋友,不要马上认为我标题党,再往下看看,如果你还有一些更好用的技巧,欢迎留言. 下面进入正题. 1 多线程调试 开发过多线程应用的朋友应该有体会,有些时候,为了观察多个线程间变量的不同状态,以及锁的获取等,就会想到在代码里加个断点debug一下. 在IDE里断点停下来

  • Intellij IDEA Debug调试技巧(小结)

    1.这里以一个web工程为例,点击图中按钮开始运行web工程. 2.设置断点 3.使用postman发送http请求 4.请求发送之后会自动跳到断点处,并且在断点之前会有数据结果显示 5.按F8 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则不进入当前方法体内,跳到下一条执行语句. 6.按F7在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内,如果该方法体还有方法,则会进入该内嵌的方法中 . 7.继续按F7,则跳到StopWatch() 构造方法中

  • JavaScript逆向调试技巧总结分享

    目录 前言 一.加密分析 二.调试技巧 1.日志分析 2.常见算法 2.1)MD5 2.2)Base64 2.3)进制处理 三.Chrome 调试技巧 总结 前言 前段时间尝试对某音的 PC 端进行了逆向,目前已经全部逆向出来了,在这里总结下一些调试技巧和总结. 本文不会涉及任何的详细代码,仅仅是作为技术来讨论. 一.加密分析 在这里以账户下的视频列表为例,可以看到,在 dy 中,加密的 JS 是 webmssdk.js,其中最主要的加密参数有以下两个 在 Postman 中进行测试,发现这两个

  • Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • 实用Javascript调试技巧分享(小结)

    见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡..因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点"偏科"了.下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信. 1. 不要使用alert 首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打

  • 12个Visual Studio调试效率技巧(小结)

    在这篇文章中,我们假定读者了解 VS 基本的调试知识,如: F5 开始使用调试器运行程序 F9 在当前行设置断点 F10 运行到下一个断点处 F5 从被调试的已停止程序恢复执行 F11 步进到函数内(如果当前程序指针指向一个函数) F10 步过函数(如果当前程序指针指向一个函数) Shift+F11 步出执行的函数 暂停执行 附加到进程 鼠标悬停时快速查看源代码中的元素 调试窗口:局部变量.监视.即时窗口.模块.调用堆栈.异常设置 许多开发人员使用这个功能强大的工具包来处理调试会话.然而, Vi

  • 详解Angular调试技巧之报错404(not found)

    序言 放假期间,学生忙着充电,学习"全栈开发"的不在少数,我时常收到读者的反馈,在调试<全栈开发之道>一书的实例时,遇到困惑. 尽管会遇到各种各样的问题,但总体来讲,可以归结为一个技术点,那就是-- Angular的调试. 编写Angular 代码并不难,难的是调试Angular代码.对于Angular新手来说,调试Angular需要一个过程,并在这个过程中不断积累经验,一看到报错,就能八九不离十猜出问题出在什么地方. 这篇文章,我们先来从常见的Angular调试技巧讲起,

随机推荐