Chrome开发者工具不完全指南,Native调试技巧与经验

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

Chrome开发者工具不完全指南,Native调试技巧与经验。 

 在上图黑色圆圈中数字,它们各自代表:

  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

Chrome开发者工具不完全指南,Native调试技巧与经验。不怕在断点时,你也足以编制代码,按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

来源:

React Native / React调试技巧

做过原生APP开发的同学们都知晓,我们在Xcode和studio中就可以直接对编写的代码举行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中形成了,须求看重浏览器来形成,React相关的开销断点调试和web开发大多一样,也是在浏览器上举行调节,即使没有原生那么便民,不过也还算不难。React
Native调试须求依靠官方的Developer Menu,下边大家就来概括聊聊那些Developer Menu
Chrome Developer Tools

在做React Native开发时,少不了的急需对React
Native程序开展调试。调试程序是每一位开发者的功底,高效的调剂不仅能增强开发作用,也能下跌Bug率。本文将向大家分享React
Native程序调试的有的技巧和心得。

上一篇大家上学了谷歌(谷歌(Google))Chrome浏览器开发者工具的底子功用,上边介绍的是Chrome开发工具中最实惠的面板Sources。 Sources面板大致是最常用到的Chrome作用面板,也是缓解一般难题的严重性功效面板。寻常假诺是支付遭受了js报错或者其余代码难点,在审视三遍代码而一名不文之后打开Sources举行js断点调试,大约能化解8成的代码难点。

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 可以透过Command⌘ + D神速键来很快打开Developer Menu
  • android模拟器
    • 可以经过Command⌘ + M急速键来很快打开Developer
      Menu。也可以因此模拟器上的菜单键来开辟

真机开启Developer Menu

  • iOS和Android真机通过摇出手机来拉开Developer Menu

Developer Menu

Developer Menu是React
Native给开发者定制的一个开发者菜单,来扶持开发者调试React Native应用。

唤醒:生产条件release (production) 下Developer Menu是不可用的。

js断点作用令人欢乐不已,此前只好在IE中靠alert弹出窗口调试js代码,那样的支出条件对于前端程序员来说几乎是一场恶梦。本篇介绍Sources的求实用法,协理各位在付出进程中够欢悦地调试js代码,而不是因它而发狂。

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成效你就可以实时的预览布局作用了,方便省时

如何打开Developer Menu

首先打开F12开发工具切换到Sources面板中

Warning

React
Native程序运行时出现的Warnings也会被间接展示在显示屏上,以风骚的背景体现,并会打印出警示音讯,你也得以因此console.warn()来手动触发Warnings,你也可以透过console.disableYellowBox = true来手动禁用Warnings的体现,或者通过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

在模拟器上开启Developer Menu

Android模拟器:
可以通过Command⌘ + M飞速键来疾速打开Developer
Menu。也可以由此模拟器上的菜单键来打开。

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

iOS模拟器:
可以由此Command⌘ + control + z疾速键来很快打开Developer Menu。

皇家赌场手机版 15

Error

React
Native程序运行时出现的Error会被一向突显在屏幕上,以革命的背景显示,并会打印出错误音讯,
你也足以由此 console.error()来手动触发Error

img

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

在真机上开启Developer Menu

在真机上您可以通过摇入手机来打开Developer Menu。
预览图

皇家赌场手机版 16

Developer Menu.jpg

Sources功效面板是资源面板,他紧要分为多少个部分,多个部分并不是独自的,他们相互关联,互动共同完成一个要害的成效:监控js在执行期的移位。简单的讲就是断点啊。

哪些真机调试

  • iOS上

安插好相应的调剂证书,直接连接线连接到真机运行即可

  • android

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

image

image

Reloading JavaScript

在只是修改了js代码的意况下,如果要预览修改结果,你不要求再行编译你的接纳。在那种情景下,你只须要告诉React
Native重新加载js即可。

唤醒:若是您改改了native
代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是特其他,这时你需要重新编译你的品类了。

先是大家来看区域1,它的功用有些近乎于Resources面板,紧如果显得网页加载的台本文件:例如css,
js等资源文件(它不分包cookie,img等静态资源文件)。

Chrome Developer Tools

Chrome 开发工具

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

  • Element 面板: 用于查看和编制当前页面中的 HTML 和 CSS 元素
  • Network 面板:用于查看 HTTP
    请求的详细新闻,如请求头、响应头及重回内容等
  • Source 面板:用于查看和调试当前页面所加载的本子的源文件
  • 提姆eLine 面板: 用于查看脚本的推行时间、页面元素渲染时间等新闻
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等音讯
  • Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS
    样式文件等
  • 奥迪(Audi)ts 面板:用于优化前端页面,加快网页加载速度等
  • Console 面板:用于显示脚本中所输出的调试音信,或运行测试脚本等

注意: 对于调试React
Native应用来说,Sources和Console是采取功效最高的八个工具

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

Reload js

Reload
js即将你项目中js代码部分重新生成bundle,然后传输给模拟器或手机。
在Developer Menu中有Reload选项,单击Reload让React
Native重新加载js。对于iOS模拟器你也可以由此Command⌘ + R火速键来加载js,对于Android模拟器可以经过双击r键来加载js。

提醒:倘诺Command⌘ + R
不能使你的iOS模拟器加载js,则可以透过选中Hardware
menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

皇家赌场手机版 17

怎么通过Chrome调试React Native程序

  • 启动远程调试

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

image

  • 开辟Chrome开发者工具

在该’http://localhost:8081/debugger-ui’网页下开辟开发者工具,打开Chrome菜单->接纳越多工具->选取开发者工具。你也足以透过快速键(Command⌘ + Option⌥ + I
on Mac, Ctrl + Shift + I on Windows)打开开发者工具

开拓Chrome开发着工具之后您会看出如下界面

image

小技巧:Automatic reloading

区域1的导航条上有多个tab切换选项,他们都存有分歧域名和环境下的js和css文件,我们率先来证实Sources(资源)选项的作用:

Sources面板

Sources面板提供了调剂 JavaScript 代码的效用

image

Sources面板可以让您看来你所要检查的页面的兼具脚本代码,并在面板选拔栏下方提供了一组正式控件,提供了中断,復苏,步进等功能。在窗口的最下方的按钮可以在遇见更加(exception)时强制中止。源码呈现在单独的标签页,通过点击
打开文件导航面板,导航栏中会突显所有已开辟的脚本文件

Chrome开发着工具中的Sources面板大约是最常用的功力面板。日常假如是支付遭受了js报错或者其余代码难点,在审美两回自己的代码而一无所有之后,首先就会打开Sources举行js断点调试

实践控制工具

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

  • 后续(Continue): 继续执行代码直到遭受下一个断点
  • 单步执行(Step over):
    步进代码以查看每一行代码对变量作出的操作,当代码调用另一个函数时不会进来那个函数,使你能够小心于近来的函数
  • 跳入(Step into): 与 Step over
    类似,不过当代码调用函数时,调试器会跻身那几个函数并跳转到函数的率先行
  • 跳出(Step out): 当你进来一个函数后,你可以点击 Step out
    执行函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 控制断点的打开和关闭,同时有限支持断点完好

查看js文件

只要您想在开发者工具上预览你的js文件,可以在开辟Sources
tab下的debuggerWorker.js选项卡,该选项卡下会展现当前调试项目的持有js文件,或者是用很快键
cmd + o 调出文件搜索间接开展检索,这一个更是便利高效

Enable Live Reload

皇家赌场手机版 18

Enable Live Reload.gif

React
Native意在为开发者带来一个更好的开发体验。若是您以为上文的加载js代码形式太low了或者不够方便,那么有没有一种更省心加载js代码的不二法门吧?
答案是必定的。
在 Developer Menu中您会面到”Enable Live Reload” 选项,该选用提供了React
Native动态加载的功效。当您的js代码暴发变化后,React
Native会自动生成bundle然后传输到模拟器或手机上,是否觉得很方便。

Sources:
包蕴该品种的静态资源文件。双击选中文件,该公文内容会在区域2中显得,倘若你选中的是js文件,那么您可以在区域2种单击行号进行断点调试,只要js执行到了您所标记的这一行,它会停下向下实施并且等待你的授命:

断点

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

  • 添加和移除断点

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

image

右键点击黑色标签会打开一个菜谱,菜单包涵以下选项:执行到此(Continue to
Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在那里您能够对断点举行更尖端的操作

image

高等操作

  • Continue to Here

如若您想让程序及时跳到某一行时,这么些功效会帮到你。倘若在该行此前还有其他断点,程序会相继通过前边的断点。其它索要指出的是以此职能在随机一行代码的边栏(gutter
line)前单击右键都会看出

  • Blackbox scripts

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

  • Edit Breakpoint

通过该作用你可以创立一个规格断点,你也得以在边栏(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

Hot Reloading

皇家赌场手机版 19

Hot Reloading .gif

除此以外,Developer Menu中还有一项必要特地介绍的,就是”Hot
Reloading”热加载,如果说Enable Live Reload解放了您的双手的话,那么Hot
Reloading不但解放了你的双手而且还解放了您的时光。 当你每一遍保存代码时Hot
Reloading效能便会生成此次修改代码的增量包,然后传输到手机或模拟器上以落实热加载。相比Enable Live Reload需求每趟都回去到启动页面,Enable Live
Reload则会在保持你的程序状态的场地下,就足以将时尚的代码计划到设备上,听起来是不是很疯狂啊。

唤醒:当你做布局的时候启动Enable Live
Reload成效你就可以实时的预览布局功用了,那足以和用AndroidStudio或AutoLayout做布局的实时预览相比美。

皇家赌场手机版 20

控制台

DevTools控制台(Console)可以让你在近年来已暂停的场地下展开考查。按 Esc
键打开/关闭控制台

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

image

Errors and Warnings

在development方式下,js部分的Errors 和
Warnings会直接打印在手机或模拟器显示器上,以红屏和黄屏展现。

从上图可以看到js执行到断点处时各种区域的变化,首先是区域3中的Breakpoints记录音信会变高亮,然后是区域4中Scope 选项中列出了断点处私有和国有的变量新闻,那样,我得以很直观地通晓,此时此刻js的推行景况。同样的,你可以把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量所有新闻:

惠及时间

  • 作者React
    Native开源项目OneM地址(依照公司开发规范搭建框架形成开发的):https://github.com/guangqiang-liu/OneM
    欢迎小伙伴们 star
  • 作者React Native QQ技术调换群:620792950 欢迎小伙伴进群调换学习
  • 终极强调:**开发中有遇上RN相关的技术难点,欢迎小伙伴加入互换群,在群里提问、相互沟通学习。沟通群也定期更新最新的RN学习资料给大家,谢谢辅助!
    **
Errors

React
Native程序运行时现身的Errors会被直接突显在显示器上,以青色的背景体现,并会打印出错误信息。
你也得以经过 console.error()来手动触发Errors。

皇家赌场手机版 21

Errors.png

皇家赌场手机版 22

Warnings

React
Native程序运行时出现的Warnings也会被一贯体现在屏幕上,以绿色的背景显示,并会打印出警示新闻。
你也可以经过 console.warn()来手动触发Warnings。
你也可以通过console.disableYellowBox = true来手动禁用Warnings的来得,或者经过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

皇家赌场手机版 23

Warnings.png

升迁:在生育条件release (production)下Errors和Warnings功能是不可用的。

接下来,你可以按F10随后js执行的门径一步一步地走下来,要是您遇见了一个函数包罗着另外一个函数,那么你可以按F11进来到个函数中去考察它的代码执行活动。你也能够透过点击区域1底部的逐条图标对js代码进行跟踪。但是我提出你选拔快捷键,故名思义,因为它相比急迅便利。不过怎么用完全根据个人习惯来吧。下图是逐一按钮的效应效果。

Chrome Developer Tools

皇家赌场手机版 24

Chrome 开发工具

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

  • Element 面板: 用于查看和编排当前页面中的 HTML 和 CSS 元素。
  • Network 面板:用于查看 HTTP
    请求的详细信息,如请求头、响应头及重回内容等。
  • Source 面板:用于查看和调剂当前页面所加载的脚本的源文件。
  • 提姆eLine 面板: 用于查看脚本的举办时间、页面元素渲染时间等音信。
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等消息。
  • Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS
    样式文件等。
  • 奥迪ts 面板:用于优化前端页面,加速网页加载速度等。
  • Console 面板:用于显示脚本中所输出的调试音信,或运行测试脚本等。

提示:对于调试React
Native应用来说,Sources和Console是选拔功效很高的四个工具。

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

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

哪些通过 Chrome调试React Native程序

你可以经过以下步骤来调节你的React Native程序:

1、为止断点调试

首先步:启动远程调试

在Developer Menu下单击”Debug JS Remotely”
启动JS远程调试作用。此时Chrome会被打开,同时会创制一个“http://localhost:8081/debugger-ui.”
Tab页。

皇家赌场手机版 25

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

其次步:打开Chrome开发者工具

在该“http://localhost:8081/debugger-ui.”Tab页下开辟开发者工具。打开Chrome菜单->选拔更多工具->接纳开发者工具。你也得以由此快捷键(Command⌘

  • Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。

皇家赌场手机版 26

开拓Chrome开发着工具之后你会看出如下界面:

皇家赌场手机版 27

3、跳入函数中去(F11)

真机调试

4、从实施的函数中跳出

在iOS上

开辟”RCTWebSocketExecutor.m
“文件,将“localhost”改为您的总结机的ip,然后在Developer Menu下单击”Debug
JS Remotely” 启动JS远程调试效用。

5、禁用所有的断点,不做其余调试

在Android上

方式一:
在Android5.0以上设备上,将手机通过usb连接到你的微处理器,然后经过adb命令行工具运行如下命令来安装端口转载。
adb reverse tcp:8081 tcp:8081
方式二:
您也可以由此在“Developer Menu”下的“Dev
Settings”中装置你的总计机ip来举行调试。

经验:在行使真机调试时,你须要确保您的手机和电脑处在同一个网段内,即它们其实同一个路由器下。

6、程序运行时遇上越发时是还是不是中断的开关

小技巧:

接下去在区域4种切换来沃特ch
Expressions 选项,它的功能是为眼前断点添加表明式,使得每趟断点往下走一步都会执行你写下的js代码。需求专注的是以此效果必须如临深渊使用,因为那也许会招致您写下的督察代码段会不断地被执行。

巧用Sources面板

Sources 面板提供了调节 JavaScript 代码的功能。它提供了图形化的V8
调试器。

皇家赌场手机版 28

Sources
面板可以让您看看你所要检查的页面的拥有脚本代码,并在面板选用栏下方提供了一组正式控件,提供了暂停,复苏,步进等职能。在窗口的最下方的按钮可以在蒙受尤其(exception)时强制中止。源码突显在单身的标签页,通过点击
打开文件导航面板,导航栏中会突显所有已开拓的本子文件。

经验:Chrome开发着工具中的Sources面板大致是自我最常用的法力面板。日常假使是开发碰到了js报错或者别的代码难点,在审视五次自己的代码而一无所获之后,我先是就会打开Sources举办js断点调试。

皇家赌场手机版 29

推行控工具

从上图可以看来“执行控工具”按钮在侧板顶部,让你可以按步执行代码,当您举办调节的时候那多少个按钮分外实惠:

  • 此起彼伏(Continue): 继续执行代码直到遇见下一个断点。
  • 单步执行(Step over):
    步进代码以查看每一行代码对变量作出的操作,当代码调用另一个函数时不会跻身那个函数,使您可以小心于如今的函数。
  • 跳入(Step into): 与 Step over
    类似,不过当代码调用函数时,调试器会进来那几个函数并跳转到函数的首先行。
  • 跳出(Step out): 当你进入一个函数后,你可以点击 Step out
    执行函数余下的代码并跳出该函数。
  • 断点切换(Toggle breakpoints):
    控制断点的敞开和倒闭,同时保持断点完好。

为了幸免你的调剂代码重复执行,大家得以在调试时直接在console控制台上一遍性地出口当前断点处的信息(推荐那样做)。为了印证大家在console面板中享有的是当下断点环境,我门可以对照断点执行前后的this值变化。

查看js文件

要是你想在开发者工具上预览你的js文件,可以在打开Sources
tab下的debuggerWorker.js选项卡,该选项卡下会呈现当前调试项目标具备js文件。

皇家赌场手机版 30

皇家赌场手机版 31

断点其实很简单

断点(Breakpoint)
是在剧本中装置好的暂停处。在DevTools中应用断点可以调试JavaScript代码,DOM更新和
network calls。

体验:你可以像使用Xcode/AndroidStudio调试Native应用相同,来行使Chrome开发者工具通过断点对先后开展调节。

皇家赌场手机版 32

加上和移除断点

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

皇家赌场手机版 33

心得:右键点击黑色标签会打开一个菜系,菜单包罗以下选项:执行到此(Continue
to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在此处你可以对断点进行更尖端的定制化的操作。

皇家赌场手机版 34

若果你认为在断点的时候为了看一个变量必须借用console面板输出的方法来查看会比较费心,那么您可以立异最新版的Chrome,它曾经为大家解决了这些烦恼。为了方便开发者调试,在那或多或少上谷歌(谷歌)已经已毕了极其,就在前几日更新过Chrome以后,卤煮意外地觉察了断点时监控环境变量的此外一种办法,这种艺术极为清晰,在断点调试的时候,区域2中会自动呈现每个变量的值,每一次代码往下走的时候那个值都回时时更新。那让开发者对眼前环境变量大致可以说是吃透。(此意义有一个小缺点,这就是不可能查看数组或者目的的切实索引和值,但是自己深信不疑google会创新它的。)

尖端操作

上文讲到右键点击粉色标签会打开一个菜谱,下边就介绍一下该菜单下的高级操作。

实践到此(Continue to Here):

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

黑盒脚本(Blackbox scripts):

黑盒脚本会从您的调用堆栈中躲藏第三方代码。

编辑断点(Edit Breakpoint):

透过该作用你可以成立一个规范断点,你也得以在边栏(gutter line)
右键并选取丰盛条件断点(Add Conditional Breakpoint)
。在输入框中,输入一个可解析为真或假的表明式。仅当条件为真时,执行会在此刹车。

皇家赌场手机版 35

体验:即使你想让程序在某处一直都毫无暂停,可以编制一个规范永远为false的标准化断点。其它,你也得以在该行代码的边栏(gutter
line)前单击右键选用“Never pause here”即可,你会发觉“Never pause
here”其实就是在该行代码上设了一个永恒为false的尺度断点。

皇家赌场手机版 36

皇家赌场手机版 37

管住你的断点

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

皇家赌场手机版 38

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

当您的种类现已线上,出现了一个bug,你修复了今后不可能看出它确实在线上的功用,那么您可以在开辟线上的类型,直接在浏览器中修改代码然后看到效率。那样的效劳往往是最直接的,这种措施也能帮您省去频仍验证公布的分神,毕竟身为前端码农的您也必定会听到过后台(常常情状下是后台公布)小叔子的埋怨:“XXX,测试通过了没,不要现身了哈,发表一遍很艰巨的!”。而在Chrome里面,只须求在区域2种直接修改,你就足以证实你的代码在线上是还是不是管用。卤煮在此地只是提议该意义的用法之一。其余的就凭诸位的才智去想了。

有一种断点叫全局断点

大局断点的机能是,当程序出现十分时,会在特其他地点暂停,那对高速定位异的常地方很方便。
做iOS开发的同窗都清楚在Xcode中得以设置全局断点,其实在Chrome
开发者工具中也一致有与之相应的听从,叫“Pause On Caught
Exceptions”。若是勾选上此功用,则就是所暴发运行时至极的代码在 try/catch
范围内,Chrome 开发者工具也可以在错误代码处停住。

皇家赌场手机版 39

皇家赌场手机版 40

永不忽视控制台

DevTools 控制台(Console) 可以让你在近来已中断的状态下开展考查。按 Esc
键打开/关闭控制台。

皇家赌场手机版 41

皇家赌场手机版,体验:你可以在控制台(Console)上打印变量,执行脚本等操作。在付出调试中非常管用。

参考:
chrome-devtools
CN-Chrome-DevTools
Debugging
http://blog.csdn.net/quanqinyang/article/details/52215652

皇家赌场手机版 42

纵使在断点时,你也足以编制代码,按ctrl+S保存之后,你谋面到区域2的背景由白色变为浅色,而断点会重新最西施行。

归来区域1,Content
script 选项开里面包蕴着一些第三方插件或者浏览器自身的js代码,日常它是被忽略的,实际上它的效益很少。我们可以更多关心一下Snippets选项。还记得基础篇里面介绍的style吗?在内部咱们得以编制界面的css代码并且即时见到它们的映射效果,同样地,在Sinppets中,我们也
可以编制(重写)js代码片段。那些有些其实就约等于你的js文件一律,差异的是本土的js文件在编辑器里面编辑的,而这里,你是在浏览器中编辑的。那么些代码片段在浏览器刷新的时候既不会消退,也不会实施,除非是您手动执行它。它可以存在你的地面浏览器中,即便关闭浏览器,再一次打开时它如故还在那里。它的主要功用可以使得大家编辑一些类型的测试代码时提供便利,你领悟,如若你在编辑器上编制这个代码,在发表时你必须为它们增进注释符号或者手动删除它们,而在浏览器上编制就不须求那样麻烦了。

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

皇家赌场手机版 43

Snippets 的老大功用强大,它的洋洋躲藏功效还有待打通。近期卤煮使用它是在挥之不去调试片段、单元测试、少量的法力代码编写作用上。

最终大家看看js中时间累加的督查功能,同上篇小说介绍的如出一辙,Sources面板和Elements面板一样有监控事件的功力,而且Sources中效用更是丰盛,也越来越有力。它的这有些功力集中在区域3中。我以下图为例,观望其功效。

皇家赌场手机版 44

从上到下,灰色圈内的数字的意义:

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

?

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开发工具中的品质方面的调剂。

Leave a Comment.