菜单

[转]谷歌Chrome浏览器开发者工具教程—JS调试篇

2019年2月2日 - 金沙前端

Chrome开发者工具不完全指南(二、进阶篇)

2015/06/23 · HTML5 · 3
评论 ·
Chrome

原文出处:
卖烧烤夫斯基   

上篇向大家介绍完了基础功能篇,本次分享的是Chrome开发工具中最得力的面板Sources
 Sources面板大约是自个儿最常用到的Chrome作用面板,也是在我看来决解一般难题的首要意义面板。平日若是是开发蒙受了js报错或者其它代码难题,在审美一遍自己的代码而一无所得之后,我先是就会打开Sources拓展js断点调试,而它也大概能一蹴即至自身80%的代码难题。Js断点这几个职能令人欢悦不已,在未曾js断点成效,只好在IE(万恶的IE)中靠alert弹出窗口调试js代码的时日(越发alert一个object根本不会理你),那样的开发条件对于前端程序员来说大致是一场恐怖的梦。本篇小说讲会介绍Sources的切实用法,支持各位在支付进程中够欢愉地调试js代码,而不是因它而疯狂。首先打开F12开发工具切换来Sources面板中:

图片 1

Sources功能面板是资源面板,他根本分为七个部分,七个部分并不是独自的,他们相互关联,互动共同促成一个关键的作用:监控js在执行期的活动。一言以蔽之就是断点啊。

先是我们来看区域1,它的功力有些近乎于Resources面板,首假如显示网页加载的本子文件:例如css,
js等资源文件(它不包罗cookie,img等静态资源文件)。

 

图片 2

 

 

 

区域1的导航条上有多少个tab切换选项,他们都存有例外域名和条件下的js和css文件,大家第一来验证Sources(资源)选项的功用:

Sources:
包括该项目的静态资源文件。双击选普通话件,该文件内容会在区域2中突显,若是您选中的是js文件,那么你能够在区域2种单击行号进行断点调试,只要js执行到了你所标记的这一行,它会告一段落向下执行并且等待你的通令:

图片 3

从上图可以观察js执行到断点处时种种区域的转变,首先是区域3中的Breakpoints笔录新闻会变高亮,然后是区域4中Scope 选择中列出了断点处私有和国有的变量新闻,那样,我可以很直观地知道,此时此刻js的施行情况。同样的,你可以把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是您悬浮其上的变量所有消息:

 

图片 4

下一场,你可以按F10随后js执行的路径一步一步地走下去,假设您赶上了一个函数包蕴着其它一个函数,那么你可以按F11跻身到个函数中去考察它的代码执行活动。你也可以透过点击区域1底层的相继图标对js代码举行跟踪。但是自己提议你选拔火速键,故名思义,因为它相比较灵通便利。然则怎么用完全依据个人习惯来啊。下图是种种按钮的功力功用。

 

图片 5

 

 在上图肉色圆圈中数字,它们分别表示:

  1、为止断点调试

  2、不跳入函数中去,继续执行下一行代码(F10)

  3、跳入函数中去(F11)

  4、从推行的函数中跳出

  5、禁用所有的断点,不做此外调试

  6、程序运行时遇上更加时是不是中断的开关

接下去在区域4种切换来Watch
Expressions
 选项,它的功效是为眼前断点添加表达式,使得每一回断点往下走一步都会实施你写下的js代码。需求专注的是其一成效必须战战兢兢选择,因为那说不定会招致您写下的监控代码段会不断地被执行。

图片 6

 

为了幸免你的调节代码重复执行,大家能够在调试时向来在console控制台上一回性地出口当前断点处的新闻(推荐那样做)。为了印证大家在console面板中有所的是眼前断点环境,我门可以对照断点执行前后的this值变化。

图片 7   
  图片 8

如若你以为在断点的时候为了看一个变量必须借用console面板输出的点子来查看会比较麻烦,那么你可以立异最新版的Chrome,它曾经为大家解决了那一个烦恼。为了方便开发者调试,在那或多或少上谷歌一度形成了无限,就在后天更新过Chrome将来,卤煮意外地意识了断点时监控环境变量的别的一种方法,这种措施极为清晰,在断点调试的时候,区域2中会自动彰显每个变量的值,每趟代码往下走的时候那个值都回时时更新。那让开发者对脚下环境变量大致可以说是洞察。(此功能有一个小瑕疵,那就是无能为力查看数组或者目的的现实性索引和值,但是我深信google会立异它的。)

图片 9

 

当您的系列现已线上,出现了一个bug,你修复了后来不可以见到它确实在线上的效果,那么你可以在开拓线上的门类,间接在浏览器中修改代码然后看到功效。那样的效益往往是最直接的,那种办法也能帮您省去频仍验证发表的忙绿,毕竟身为前端码农的您也势必会听到过后台(平日状态下是后台公布)四弟的埋怨:“XXX,测试通过了没,不要出现了哈,发表一回很麻烦的!”。而在Chrome里面,只需求在区域2种直接修改,你就可以表明你的代码在线上是不是有效。卤煮在那里只是提议该成效的用法之一。别的的就凭诸位的聪明才智去想了。

图片 10   
 
  图片 11

纵使在断点时,你也足以编写代码,按ctrl+S保存之后,你会看出区域2的背景由白色变为浅色,而断点会重新开端举办。

回来区域1,Content
script
 选项开里面蕴涵着有些第三方插件或者浏览器自身的js代码,寻常它是被忽视的,实际上它的功力很少。大家得以越多关注一下Snippets挑选。还记得基础篇里面介绍的style啊?在其中大家可以编写界面的css代码并且即时看到它们的炫耀效果,同样地,在Sinppets中,我们也
可以编写(重写)js代码片段。那一个部分其实就一定于你的js文件一律,不一样的是本土的js文件在编辑器里面编辑的,而这边,你是在浏览器中编辑的。那个代码片段在浏览器刷新的时候既不会消亡,也不会执行,除非是你手动执行它。它能够存在你的地面浏览器中,就算关闭浏览器,再一次打开时它如故还在那边。它的显要意义可以使得大家编辑一些类型的测试代码时提供便民,你了然,如果你在编辑器上编制那一个代码,在揭发时您不可能不为它们拉长注释符号或者手动删除它们,而在浏览器上编制就不要求如此麻烦了。

Snippets分选的空白点右键后选取弹出的new选项,建立一个您自己的新的文书,然后在区域2种编辑它。

图片 12

 

Snippets 的老大作用强大,它的无数东躲黄河作用还有待打通。近日卤煮使用它是在挥之不去调试片段、单元测试、少量的效用代码编写作用上。

末尾大家看看js中时间累加的监控效率,同上篇小说介绍的等同,Sources面板和Elements面板一样有监控事件的机能,而且Sources中效率尤为丰硕,也更是强有力。它的那有些效应集中在区域3中。我以下图为例,观望其效能。

图片 13

 

从上到下,棕色圈内的数字的含义:

1、断点处的债堆栈,就是从该函数起,逐级追寻调用到他的函数名。例如:

JavaScript

function a () { b(); } function b() { c(); } function c() {
//在该处断点,查看call stack } a->b->c. call stack
从上到下的次第就是 c b a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function a () {
   b();
}
function b() {
   c();  
}
function c() {
  //在该处断点,查看call stack  
}
a->b->c.
call stack 从上到下的顺序就是
c
b
a

2、在区域2中你的断点调试消息。当某个断点在实践的时候对应的新闻会高亮,双击该处音信可以在区域2中火速稳定。

3、添加的Dom监控音信。

4、击+ 并输入 URL 包括的字符串即可监听该 URL 的 Ajax
请求,输入内容就一定于 URL 的过滤器。如果什么都不填,那么就监听所有 XHR
请求。一旦 XHR 调用触发时就会在 request.send() 的地点暂停。

5、为网页添加各连串型的断点新闻。如选中了Mouse中的某一项(click),当你在网页上出发这些动作(单击网页任意地点),你浏览器就是随即断点监控该事件。

 

值得再一次重新一回,Sources是相似的功效开发中最常用到也是最得力的效劳面板,它其中的不在少数效应对于我们开发前端工程以来是极度有支持的。在web2.0时日的今日,我不引进如故在友好的代码里面写调试音信的行为,因为那会然你的支付变得繁琐。Chrome开发工具给我们提供的兵不血刃成效,大家应当可以利用之。那篇小说就到此为止,固然有些麻烦,但归根结底基本发挥了卤煮使用经验和想法,希望对您有赞助。若是您觉得不错,请推荐一下本文并继续关切卤煮在的博客。在下一篇中本身将向大家介绍Chrome开发工具中的质量方面的调剂。

1 赞 15 收藏 3
评论

图片 14

图片 15

Chrome Developer Tools

Chrome 开发工具

谷歌(谷歌(Google))Chrome开发工具,是依据谷歌(谷歌(Google))浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深远浏览器和网页应用程序的内部。该工具得以有效地追踪布局难题,设置
JavaScript
断点并可深远领会代码的最优化策略。Chrome开发工具一共提供了8大组工具:

注意: 对于调试React
Native应用来说,Sources和Console是使用频率最高的四个工具

您可以像调试JavaScript代码一样来调节你的React Native程序

Android模拟器:

可以由此Command⌘ + M疾速键来很快打开Developer
Menu。也可以透过模拟器上的菜单键来开辟。

心得:高版本的模拟器日常没有菜单键的,可是Nexus
S上是有菜单键的,假如想使用菜单键,可以创设一个Nexus S的模拟器。

1、断点处的债堆栈,就是从该函数起,逐级追寻调用到她的函数名。例如:

控制台

DevTools控制台(Console)可以让你在方今已中断的动静下开展考查。按 Esc
键打开/关闭控制台

您可以在控制台(Console)上打印变量,执行脚本等操作。在付出调试中最常用

image

治本你的断点

您可以经过Chrome开发者工具的入手面板来归并保管你的断点。

图片 16

心得:你可以因此断点前的复选框来启用和剥夺断点,也得以单击右键来拓展越来越多的操作(如:移除断点,移除所有断点,启用禁用断点等)。

4、从履行的函数中跳出

Developer Menu

模拟器开启Developer Menu

真机开启Developer Menu

不要忽略控制台

DevTools 控制台(Console) 可以让你在近期已中断的场合下展开考试。按 Esc
键打开/关闭控制台。

图片 17

感受:你可以在控制台(Console)上打印变量,执行脚本等操作。在付出调试中更加实惠。

末尾我们看看js中时间增进的监察作用,同上篇文章介绍的一致,Sources面板和Elements面板一样有监控事件的功力,而且Sources中功用尤为助长,也愈发强大。它的那有的成效集中在区域3中。我以下图为例,寓目其功用。

Warning

React
Native程序运行时出现的Warnings也会被直接呈现在屏幕上,以藏灰色的背景展现,并会打印出警示新闻,你也足以通过console.warn()来手动触发Warnings,你也足以因此console.disableYellowBox = true来手动禁用Warnings的显得,或者经过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

Chrome 开发工具

谷歌(谷歌(Google)) Chrome
开发工具,是基于谷歌(谷歌)浏览器内含的一套网页制作和调剂工具。开发者工具允许网页开发者深切浏览器和网页应用程序的里边。该工具得以使得地追踪布局难题,设置
JavaScript 断点并可浓密通晓代码的最优化策略。 Chrome
开发工具一共提供了8大组工具:

唤醒:对于调试React
Native应用来说,Sources和Console是采纳功效很高的五个工具。

您可以像调试JavaScript代码一样来调节你的React Native程序。

图片 18

怎样真机调试

配备好相应的调节证书,直接连接线连接到真机运行即可

摇晃手机,调出Developer Menu面板,在’Developer Menu’下的’Dev
Settings’中Debug server host & prot for
device配置自己路由器ip地址。端口使用8081即可

image

image

真机调试

上一篇我们上学了谷歌(Google)Chrome浏览器开发者工具的基础意义,上边介绍的是Chrome开发工具中最有效的面板Sources。 Sources面板大约是最常用到的Chrome功效面板,也是化解相似难点的重点职能面板。常常借使是付出遭逢了js报错或者其余代码难点,在审美三次代码而一贫如洗之后打开Sources举办js断点调试,大致能一挥而就8成的代码难点。

福利时间

第一步:启动远程调试

在Developer Menu下单击”Debug JS Remotely”
启动JS远程调试效能。此时Chrome会被打开,同时会创设一个“
Tab页。
图片 19

2、不跳入函数中去,继续执行下一行代码(F10)

Reloading JavaScript

在只是修改了js代码的意况下,假若要预览修改结果,你不需要重新编译你的选择。在那种状态下,你只必要告诉React
Native重新加载js即可。

注意:
若是您改改了native的代码或改动了Images.xcassets、res/drawable中的文件,重新加载js是分外的,那时你需求再行编译你的品种了

Reload js

Reload js将您项目中js代码部分重新生成bundle文件,然后传输给模拟器或手机

在Developer Menu中单击Reload让React
Native重新加载js。对于iOS模拟器你也得以经过Command⌘ + R连忙键来加载js,对于Android模拟器可以由此双击r键来加载js

注意:若是Command⌘ + R 不可以使你的iOS模拟器加载js,可以因此选中Hardware
menu中Keyboard选项下的 ‘Connect Hardware Keyboard’ 试试

Enable Live Reload

在 Developer Menu中有 ‘Enable Live Reload’ 选项,该采用提供了React
Native动态加载的效应。当您的js代码爆发变化后,React
Native会自动生成bundle然后传输到模拟器或手机上

gif

Enable Hot Reloading

Developer Menu中还有一项需求专门介绍的,就是’Enable Hot
Reloading’热加载,固然说Enable Live Reload解放了您的双手的话,那么Hot
Reloading不但解放了你的双手而且还解放了您的日子。 当你每便保存代码时Hot
Reloading效能便会转变此次修改代码的增量包,然后传输到手机或模拟器上以落到实处热加载。相比较Enable Live Reload需求每一遍都回来到启动页面,Enable Live
Reload则会在保持你的先后状态的景况下,就可以将流行的代码陈设到装备上,当你做布局的时候启动Enable
Live Reload功能你就足以实时的预览布局功效了,方便省时

在做React Native开发时,少不了的内需对React
Native程序开展调剂。调试程序是每一位开发者的根底,高效的调剂不仅能增强支付效用,也能下降Bug率。本文将向大家分享React
Native程序调试的局地技艺和体验。

5、为网页添加各连串型的断点音讯。如选中了Mouse中的某一项(click),当你在网页上出发这一个动作(单击网页任意地点),你浏览器就是即时断点监控该事件。

Error

React
Native程序运行时出现的Error会被平昔展示在显示屏上,以革命的背景呈现,并会打印出错误音讯,
你也足以经过 console.error()来手动触发Error

img

注意: 在生产环境release下Error和Warning作用不在生效

在iOS上

开拓”RCTWebSocketExecutor.m
“文件,将“localhost”改为您的处理器的ip,然后在Developer Menu下单击”Debug
JS Remotely” 启动JS远程调试功效。

归来区域1,Content
script 选项开里面包含着部分第三方插件或者浏览器自身的js代码,常常它是被忽视的,实际上它的成效很少。大家得以越多关心一下Snippets选项。还记得基础篇里面介绍的style吗?在里边我们得以编制界面的css代码并且即时观望它们的照射效果,同样地,在Sinppets中,我们也
可以编写(重写)js代码片段。那些片段其实就一定于您的js文件一律,分歧的是当地的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。那个代码片段在浏览器刷新的时候既不会消退,也不会执行,除非是您手动执行它。它可以存在你的地面浏览器中,纵然关闭浏览器,再一次打开时它如故还在那里。它的重点成效可以使得大家编辑一些档次的测试代码时提供便利,你知道,若是您在编辑器上编制这几个代码,在宣布时你必须为它们增加注释符号或者手动删除它们,而在浏览器上编制就不要求那样麻烦了。

React Native / React调试技巧

做过原生APP开发的同学们都知情,大家在Xcode和studio中就可以直接对编写的代码举行断点调试,很有益,但是web开发断点调试就不可能平昔在开发工具中成就了,需求依靠浏览器来成功,React相关的开销断点调试和web开发大多一样,也是在浏览器上拓展调剂,即使尚无原生那么便宜,可是也还算简单。React
Native调试要求借助官方的Developer Menu,上面大家就来简单聊聊那个Developer Menu
Chrome Developer Tools

参考

chrome-devtools
CN-Chrome-DevTools
Debugging

2、在区域2中你的断点调试音信。当某个断点在实践的时候对应的信息会高亮,双击该处新闻可以在区域2中高速稳定。

断点

断点(Breakpoint)是在剧本中装置好的暂停处,在DevTools中选用断点可以调试JavaScript代码

在 Sources
面板的文件导航面板中打开一个JavaScript文件来调节,点击边栏(line gutter)
为当前行设置一个断点,已经安装的断点处会有一个藏蓝色的价签,单击灰色标签,断点即被移除

image

右键点击灰色标签会打开一个菜谱,菜单包涵以下选项:执行到此(Continue to
Here),黑盒脚本(布莱克box scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在此处您可以对断点进行更高级的操作

image

高档操作

如果你想让程序及时跳到某一行时,这一个作用会帮到你。假若在该行此前还有其他断点,程序会挨个通过前边的断点。别的须要提议的是这么些效用在肆意一行代码的边栏(gutter
line)前单击右键都会看到

黑盒脚本会从你的调用堆栈中隐藏第三方代码

透过该成效你可以创制一个标准化断点,你也足以在边栏(gutter line)
右键并选用丰盛条件断点(Add Conditional Breakpoint)
。在输入框中,输入一个可解析为真或假的表明式。仅当规则为真时,执行会在此中断

image

要是您想让程序在某处一贯都并非暂停,可以编写一个尺码永远为false的尺度断点。其它,你也足以在该行代码的边栏(gutter
line)前单击右键接纳“Never pause here”即可,你会发觉“Never pause
here”其实就是在该行代码上设了一个永远为false的规格断点

image

管制断点

你可以由此Chrome开发者工具的左边面板来归并保管你的断点

image

你可以经过断点前的复选框来启用和剥夺断点,也得以单击右键来展开更加多的操作(如:移除断点,移除所有断点,启用禁用断点等)

大局断点

全局断点的功效是,当程序出现极度时,会在很是的地点暂停,这对高效定位异的常地方很有益于。
做iOS开发的同班都精晓在Xcode中可以安装全局断点,其实在Chrome
开发者工具中也同等有与之相应的效益,叫’Pause On Caught
Exceptions’。若是勾选上此成效,则就是所发生运行时那几个的代码在 try/catch
范围内,Chrome 开发者工具也可以在错误代码处停住

image

第二步:打开Chrome开发者工具

在该“

图片 20

打开Chrome开发着工具之后您见面到如下界面:
图片 21

图片 22

Sources面板

Sources面板提供了调剂 JavaScript 代码的意义

image

Sources面板能够让您看看您所要检查的页面的有所脚本代码,并在面板选取栏下方提供了一组正式控件,提供了刹车,苏醒,步进等效果。在窗口的最下方的按钮可以在碰到越发(exception)时强制中止。源码彰显在独立的标签页,通过点击
打开文件导航面板,导航栏中会突显所有已开辟的本子文件

Chrome开发着工具中的Sources面板差不离是最常用的作用面板。日常假诺是付出碰着了js报错或者其他代码难题,在审美两遍自己的代码而一介不取之后,首先就会打开Sources举行js断点调试

实践控制工具

从上图可以看出’执行控制工具’按钮在侧板顶部,让您可以按步执行代码,当你举办调试的时候那多少个按钮卓殊实用:

查看js文件

若果您想在开发者工具上预览你的js文件,可以在打开Sources
tab下的debuggerWorker.js选项卡,该选项卡下会突显当前调试项目标具有js文件,或者是用便捷键
cmd + o 调出文件搜索直接开展检索,这么些越发便民急迅

预览图

图片 23

在Snippets选项的空白点右键后接纳弹出的new选项,建立一个你协调的新的文件,然后在区域2种编辑它。

什么样通过Chrome调试React Native程序

在Developer Menu下单击’Debug JS
Remotely’启动JS远程调试功用,此时Chrome会被打开,同时会创设一个’http://localhost:8081/debugger-ui’网页

image

在该’http://localhost:8081/debugger-ui’网页下开拓开发者工具,打开Chrome菜单->选取更加多工具->选取开发者工具。你也能够由此火速键(Command⌘ + Option⌥ + I
on Mac, Ctrl + Shift + I on Windows)打开开发者工具

打开Chrome开发着工具之后您会面到如下界面

image

小技巧:


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图