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

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值变化。

亚洲必赢官网 7Native调试技巧与体会,Chrome开发者工具不完全指南。   
  亚洲必赢官网 8

如若您以为在断点的时候为了看一个变量必须借用console面板输出的点子来查看会相比麻烦,那么你可以创新最新版的Chrome,它曾经为大家缓解了这些烦恼。为了便于开发者调试,在那或多或少上谷歌(谷歌(Google))已经到位了无以复加,就在明日更新过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

来源:

React Native / React调试技巧

做过原生APP开发的校友们都驾驭,大家在Xcode和studio中就足以一向对编写的代码进行断点调试,很有利,不过web开发断点调试就不可能平素在开发工具中完成了,须要珍爱浏览器来形成,React相关的付出断点调试和web开发大多一样,也是在浏览器上举办调剂,即使从未原生那么便宜,但是也还算不难。React
Native调试须要借助官方的Developer Menu,下边大家就来简单聊聊这么些Developer Menu
Chrome Developer Tools

原稿链接:

上一篇大家学习了谷歌(谷歌(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

在做React Native开发时,少不了的必要对React
Native程序举办调节。调试程序是每一位开发者的功底,高效的调剂不仅能增强支付作用,也能下跌Bug率。本文将向大家分享React
Native程序调试的局地技艺和体会。

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

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

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

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

Warning

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

img

哪些打开Developer Menu

亚洲必赢官网 15

Error

React
Native程序运行时出现的Error会被直接突显在显示器上,以革命的背景浮现,并会打印出错误新闻,
你也足以通过 console.error()来手动触发Error

img

注意: 在生养条件release下Error和Warning成效不在生效

在模拟器上打开Developer Menu

Sources功用面板是资源面板,他第一分为八个部分,多个部分并不是独立的,他们相互关联,互动共同促成一个重大的效益:监控js在执行期的移位。简单来讲就是断点啊。

什么样真机调试

  • iOS上

亚洲必赢官网 ,安插好相应的调试证书,直接连接线连接到真机运行即可

  • android

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

image

image

Android模拟器:

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

心得:高版本的模拟器常常没有菜单键的,然而Nexus
S上是有菜单键的,固然想使用菜单键,可以创制一个Nexus S的模拟器。

率先大家来看区域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程序

iOS模拟器:

可以经过Command⌘ + D飞快键来火速打开Developer Menu。

亚洲必赢官网 16

怎么样通过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

在真机上开启Developer Menu:

在真机上您能够经过摇出手机来打开Developer Menu。

区域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 调出文件搜索直接开展搜寻,那么些尤其便利快捷

预览图

亚洲必赢官网 17

Sources:
包涵该类型的静态资源文件。双击选中文件,该公文内容会在区域2中呈现,即便你选中的是js文件,那么您可以在区域2种单击行号举行断点调试,只要js执行到了您所标记的这一行,它会告一段落向下进行并且等待你的指令:

断点

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

  • 加上和移除断点

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

image

右键点击黑色标签会打开一个菜单,菜单包罗以下选项:执行到此(Continue to
Here),黑盒脚本(布莱克box 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

Reloading JavaScript

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

提示:倘诺您改改了native
代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是丰富的,那时你须求重新编译你的花色了。

亚洲必赢官网 18

控制台

DevTools控制台(Console)可以让你在近日已中断的情景下进行考查。按 Esc
键打开/关闭控制台

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

image

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” 。

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

福利时间

  • 小编React
    Native开源项目OneM地址(依据公司支付规范搭建框架形成开发的):https://github.com/guangqiang-liu/OneM
    欢迎小伙伴们 star
  • 作者React Native QQ技术沟通群:620792950 欢迎小伙伴进群交换学习
  • 末段强调:**付出中有蒙受RN相关的技艺问题,欢迎小伙伴插足交换群,在群里提问、互相调换学习。互换群也定期更新最新的RN学习材料给我们,谢谢协助!
    **

小技巧:Automatic reloading

亚洲必赢官网 19

Enable Live Reload

亚洲必赢官网 20

React
Native目的在于为开发者带来一个更好的支付体验。假若您以为上文的加载js代码形式太low了或者不够便利,那么有没有一种更便利加载js代码的措施呢?
答案是肯定的。 
在 Developer Menu中您会合到”Enable Live Reload” 选项,该选拔提供了React
Native动态加载的效劳。当您的js代码暴发变化后,React
Native会自动生成bundle然后传输到模拟器或手机上,是或不是认为很有利。

下一场,你可以按F10随后js执行的路径一步一步地走下去,倘诺你遇见了一个函数包罗着此外一个函数,那么你可以按F11进入到个函数中去考察它的代码执行活动。你也可以透过点击区域1底部的逐条图标对js代码进行跟踪。不过自己提议你拔取神速键,故名思义,因为它相比较快捷便利。但是怎么用完全根据个人习惯来吧。下图是各种按钮的效应出力。

Hot Reloading

亚洲必赢官网 21

其余,Developer Menu中还有一项要求尤其介绍的,就是”Hot
Reloading”热加载,假诺说Enable Live Reload解放了您的双手的话,那么Hot
Reloading不但解放了您的双手而且还解放了你的时刻。 当你每便保存代码时Hot
Reloading成效便会转变此次修改代码的增量包,然后传输到手机或模拟器上以贯彻热加载。比较Enable Live Reload需求每一趟都回到到启动页面,Enable Live
Reload则会在保证您的顺序状态的情状下,就可以将新型的代码安排到装备上,听起来是还是不是很疯狂啊。

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

亚洲必赢官网 22

Errors and Warnings

在development情势下,js部分的Errors 和
Warnings会直接打印在哥哥大或模拟器显示器上,以红屏和黄屏显示。

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

Errors

React
Native程序运行时出现的Errors会被直接显示在显示屏上,以红色的背景浮现,并会打印出错误新闻。
你也足以由此console.error()来手动触发Errors。

亚洲必赢官网 23

1、为止断点调试

Warnings

React
Native程序运行时出现的Warnings也会被平昔体现在显示器上,以红色的背景展示,并会打印出警示信息。
你也足以因而console.warn()来手动触发Warnings。
你也足以透过console.disableYellowBox = true来手动禁用Warnings的突显,或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

亚洲必赢官网 24

唤醒:在生养环境release (production)下Errors和Warnings成效是不可用的。

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

Chrome Developer Tools

3、跳入函数中去(F11)

Chrome 开发工具

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

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

唤醒:对于调试React
Native应用来说,Sources和Console是行使效用很高的多个工具。

你能够像调试JavaScript代码一样来调节你的React Native程序。

4、从履行的函数中跳出

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

你可以因此以下步骤来调节你的React Native程序:

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

首先步:启动远程调试

在Developer Menu下单击”Debug JS Remotely”
启动JS远程调试功用。此时Chrome会被打开,同时会创制一个“
Tab页。
亚洲必赢官网 25

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

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

在该“

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

亚洲必赢官网 26

开拓Chrome开发着工具之后你会看到如下界面:
亚洲必赢官网 27

接下去在区域4种切换来沃·特(W·at)ch
Expressions 选项,它的功力是为近来断点添加表明式,使得每趟断点往下走一步都会履行你写下的js代码。必要小心的是其一作用必须审慎运用,因为那说不定会造成你写下的监督代码段会不断地被执行。

真机调试

亚洲必赢官网 28

在iOS上

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

为了防止你的调节代码重复执行,大家可以在调节时直接在console控制台上两次性地出口当前断点处的音信(推荐那样做)。为了表明大家在console面板中享有的是时下断点环境,我门能够对照断点执行前后的this值变化。

在Android上

方式一: 
在Android5.0之上设备上,将手机通过usb连接到你的统计机,然后通过adb命令行工具运行如下命令来设置端口转发。 
adb reverse tcp:8081 tcp:8081

方式二:
你也得以通过在“Developer Menu”下的“Dev
Settings”中设置你的微机ip来开展调剂。

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

亚洲必赢官网 29

小技巧:


亚洲必赢官网 30

巧用Sources面板

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

 亚洲必赢官网 31

Sources
面板可以让你看到您所要检查的页面的有着脚本代码,并在面板拔取栏下方提供了一组正式控件,提供了暂停,复苏,步进等功能。在窗口的最下方的按钮可以在蒙受越发(exception)时强制中止。源码呈现在单身的标签页,通过点击
打开文件导航面板,导航栏中会展现所有已开辟的本子文件。

经验:Chrome开发着工具中的Sources面板大概是自我最常用的功效面板。日常倘使是开发遇到了js报错或者其余代码问题,在审视五次自己的代码而室如悬磬之后,我第一就会打开Sources举办js断点调试。

即使您觉得在断点的时候为了看一个变量必须借用console面板输出的艺术来查看会比较坚苦,那么您可以立异最新版的Chrome,它早已为我们缓解了这些烦恼。为了有利于开发者调试,在那一点上谷歌(谷歌(Google))一度形成了极致,就在前些天更新过Chrome以后,卤煮意外地窥见了断点时监控环境变量的其它一种格局,那种措施极为清晰,在断点调试的时候,区域2中会自动展现每个变量的值,每一趟代码往下走的时候那一个值都回时时更新。那让开发者对现阶段环境变量大概可以说是侦破。(此作用有一个小缺点,那就是力不从心查看数组或者目的的具体索引和值,可是自己深信不疑google会革新它的。)

推行控工具

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

  • 后续(Continue): 继续执行代码直到碰到下一个断点。
  • 单步执行(Step over):
    步进代码以查看每一行代码对变量作出的操作,当代码调用另一个函数时不会进来那几个函数,使你可以小心于当下的函数。
  • 跳入(Step into): 与 Step over
    类似,但是当代码调用函数时,调试器会进入那么些函数并跳转到函数的第一行。
  • 跳出(Step out): 当你进去一个函数后,你可以点击 Step out
    执行函数余下的代码并跳出该函数。
  • 断点切换(Toggle breakpoints):
    控制断点的开启和关闭,同时保持断点完好。

亚洲必赢官网 32

查看js文件

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

亚洲必赢官网 33

当您的门类现已线上,出现了一个bug,你修复了今后不可能看到它确实在线上的效果,那么您可以在开拓线上的花色,直接在浏览器中修改代码然后看到成效。那样的效益往往是最直接的,那种办法也能帮您省去频仍验证公布的勤奋,毕竟身为前端码农的你也必定会听到过后台(常常状态下是后台揭橥)哥哥的埋怨:“XXX,测试因此了没,不要出现了哈,公布三回很坚苦的!”。而在Chrome里面,只需求在区域2种直接改动,你就能够声明你的代码在线上是还是不是行得通。卤煮在那边只是提出该成效的用法之一。其他的就凭诸位的聪明才智去想了。

断点其实很简短

断点(Breakpoint)
是在本子中设置好的暂停处。在DevTools中运用断点能够调试JavaScript代码,DOM更新和
network calls。

感受:你可以像使用Xcode/AndroidStudio调试Native应用相同,来利用Chrome开发者工具通过断点对程序开展调节。

亚洲必赢官网 34

拉长和移除断点

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

亚洲必赢官网 35

经验:右键点击青色标签会打开一个菜单,菜单包蕴以下选项:执行到此(Continue
to Here),黑盒脚本(布莱克(Black)box scripts),移除断点(Remove Breakpoint),
编辑断点(Edit Breakpoint),和 禁用断点(Disable
Breakpoint)。在此处你可以对断点举行更尖端的定制化的操作。亚洲必赢官网 36

亚洲必赢官网 37

高档操作

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

实施到此(Continue to Here):

即使您想让程序及时跳到某一行时,这一个效应会帮到你。假设在该行之前还有其余断点,程序会相继通过后边的断点。别的索要提议的是其一作用在肆意一行代码的边栏(gutter
line)前单击右键都会看到。

黑盒脚本(布莱克(Black)box scripts):

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

编排断点(Edit Breakpoint):

通过该功用你可以创立一个规格断点,你也可以在边栏(gutter line)
右键并选取丰硕条件断点(Add Conditional Breakpoint)
。在输入框中,输入一个可解析为真或假的表达式。仅当规则为真时,执行会在此刹车。 
亚洲必赢官网 38

心得:若是你想让程序在某处平昔都毫无暂停,可以编写一个标准化永远为false的尺度断点。此外,你也可以在该行代码的边栏(gutter
line)前单击右键拔取“Never pause here”即可,你会发现“Never pause
here”其实就是在该行代码上设了一个世代为false的规则断点。亚洲必赢官网 39

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

管制你的断点

您可以通过Chrome开发者工具的右侧面板来归并管理你的断点。

亚洲必赢官网 40

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

再次来到区域1,Content
script 选项开里面包涵着一些第三方插件或者浏览器自身的js代码,常常它是被忽略的,实际上它的效率很少。大家可以更加多关怀一下Snippets选项。还记得基础篇里面介绍的style吗?在里头大家得以编制界面的css代码并且即时看到它们的映射效果,同样地,在Sinppets中,大家也
可以编制(重写)js代码片段。这个有些其实就相当于您的js文件一律,分裂的是本土的js文件在编辑器里面编辑的,而那边,你是在浏览器中编辑的。这几个代码片段在浏览器刷新的时候既不会烟消云散,也不会履行,除非是您手动执行它。它可以存在你的地面浏览器中,即便关闭浏览器,再一次打开时它仍旧还在那里。它的严重性功用可以使得我们编辑一些类其余测试代码时提供方便,你精通,若是你在编辑器上编制这么些代码,在昭示时您无法不为它们增进注释符号或者手动删除它们,而在浏览器上编制就不须求如此麻烦了。

有一种断点叫全局断点

全局断点的效用是,当程序出现很是时,会在极度的地点暂停,那对高速定位异的常地方很方便。
做iOS开发的同室都明白在Xcode中可以安装全局断点,其实在Chrome
开发者工具中也一样有与之对应的法力,叫“Pause On Caught
Exceptions”。如若勾选上此意义,则就是所发出运行时那多少个的代码在 try/catch
范围内,Chrome 开发者工具也可以在错误代码处停住。 
亚洲必赢官网 41

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

不用大意控制台

DevTools 控制台(Console) 可以让你在近来已中断的情形下进行考试。按 Esc
键打开/关闭控制台。

亚洲必赢官网 42

经验:你可以在控制台(Console)上打印变量,执行脚本等操作。在支付调试中分外实惠。

亚洲必赢官网 43

参考

chrome-devtools
CN-Chrome-DevTools
Debugging

Snippets 的不行成效强大,它的累累东躲广西功效还有待挖掘。如今卤煮使用它是在挥之不去调试片段、单元测试、少量的出力代码编写作用上。

About

本文来源《React
Native学习笔记》层层小说。 
驾驭越来越多,可以爱慕入微自我的GitHub 
@

终极我们看看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开发工具中的性能方面的调试。

网站地图xml地图