高效的调试不仅能提高开发效率betway体育app,N

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

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

原稿出处: 卖BBQ夫斯基   

上篇向大家介绍完了根基意义篇,这一次分享的是Chrome开采工具中最可行的面板Sources。  Sources面板差不离是自身最常用到的Chrome功用面板,也是以作者之见决解一般难题的关键意义面板。日常假诺是开拓蒙受了js报错或然其余代码难点,在审视贰遍自身的代码而一无全部之后,笔者第一就能展开Sources开展js断点调节和测量检验,而它也大概能一蹴而就本人十分九的代码难题。Js断点那个效果令人兴奋不已,在未曾js断点效率,只可以在IE(万恶的IE)中靠alert弹出窗口调节和测量试验js代码的有时(特别alert一个object根本不会理你),那样的支付景况对于前端工程师来讲大概是一场恶梦。本篇文章讲会介绍Sources的切实用法,帮忙各位在支付进度中够欢畅地调节和测量试验js代码,并不是因它而疯狂。首先展开F12开采工具切换成Sources面板中:

betway体育app 1

Sources作用面板是能源面板,他器重分为多少个部分,多少个部分并非单独的,他们互相关联,互动共同达成贰个器重的意义:监察和控制js在实施期的移位。一句话来讲正是断点啊。

首先我们来看区域1,它的成效有些看似于Resources面板,首假使显得网页加载的台本文件:举例css, js等财富文件(它不分包cookie,img等静态财富文件)。

 

betway体育app 2

 

 

 

区域1的导航条上有三个tab切换选项,他们都存有两样域名和条件下的js和css文件,大家先是来表明Sources(能源)选项的成效:

Sources: 包涵该品种的静态能源文件。双击选中文件,该文件内容会在区域第22中学呈现,要是你选中的是js文件,那么你能够在区域2种单击行号进行断点调节和测验,只要js推行到了您所标识的这一行,它会告一段落向下实践并且等待你的下令:

betway体育app 3

从上海教室能够见见js实施到断点处时每个地方的变通,首先是区域3中的Breakpoints记录消息会变高亮,然后是区域4中Scope 挑选中列出了断点处私有和国有的变量新闻,这样,我得以很直观地领略,此时此刻js的实施意况。同样的,你能够把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是您悬浮其上的变量全体消息:

 

betway体育app 4

然后,你能够按F10接着js实行的路径一步一步地走下来,要是您遭受了贰个函数饱含着另外四个函数,那么你能够按F11步入到个函数中去考察它的代码实施活动。你也可以经过点击区域1底层的顺序Logo对js代码进行追踪。可是自身提出您利用火速键,故名思义,因为它比较急迅便利。可是怎么用完全依据个人习惯来吧。下图是各种开关的效果与利益作用。

 

betway体育app 5

 

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

  1、停止断点调节和测量试验

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

  3、跳入函数中去(F11)

  4、从施行的函数中跳出

  5、禁止使用全部的断点,不做另向外调拨运输试

  6、程序运维时遭受非常时是不是中断的按钮

接下去在区域4种切换成Watch Expressions 选项,它的意义是为眼下断点增多表明式,使得每一次断点往下走一步都会进行你写下的js代码。必要小心的是以此意义亟须审慎接纳,因为那或然会招致您写下的监督代码段会不断地被实施。

betway体育app 6

 

为了防止你的调度代码重复实行,大家得以在调节和测量试验时一直在console调控台上壹回性地出口当前断点处的新闻(推荐那样做)。为了求证我们在console面板中享有的是时下断点蒙受,小编门能够相比较断点实践前后的this值变化。

betway体育app 7      betway体育app 8

假如你以为在断点的时候为了看三个变量必得借用console面板输出的办法来查看会比较费力,那么您能够立异最新版的Chrome,它曾经为大家化解了这几个烦恼。为了便于开荒者调节和测量试验,在那或多或少上Google一度成功了极致,就在今日更新过Chrome未来,卤煮意内地觉察了断点时监察和控制情况变量的其他一种艺术,这种方法极为清晰,在断点调节和测量检验的时候,区域第22中学会自动展现每一个变量的值,每回代码往下走的时候这一个值都回时时更新。那让开辟者对当下情状变量大概能够说是吃透。(此意义有二个小劣点,那便是无力回天查看数组或然指标的具体索引和值,但是自个儿深信google会立异它的。)

betway体育app 9

 

当你的花色现已线上,出现了三个bug,你修复了随后不恐怕看出它的确在线上的功用,那么您能够在开发线上的项目,直接在浏览器中期维修改代码然后看到作用。那样的效劳往往是最直白的,这种艺术也能帮你省去频仍验证发布的劳动,毕竟身为前端码农的您也迟早会听到过后台(通常状态下是后台发表)三哥的埋怨:“XXX,测量检验通过了没,不要出现了哈,宣布二回很辛勤的!”。而在Chrome里面,只必要在区域2种直接修改,你就能够证实你的代码在线上是还是不是管用。卤煮在此间只是建议该成效的用法之一。其余的就凭诸位的才智去想了。

betway体育app 10        betway体育app 11

哪怕在断点时,你也能够编写制定代码,按ctrl+S保存之后,你会看到区域2的背景由水晶色变为浅色,而断点会重新最早实行。

归来区域1,Content script 选项开里面包括着部分第三方插件或许浏览器自个儿的js代码,平日它是被忽视的,实际上它的效果非常少。大家能够更多关怀一下Snippets分选。还记得基础篇里面介绍的style啊?在中间大家能够编写分界面包车型地铁css代码並且即时观察它们的照射效果,一样地,在Sinppets中,我们也 能够编写(重写)js代码片段。这一个有个别其实就一定于您的js文件一律,不相同的是地面包车型客车js文件在编辑器里面编辑的,而这边,你是在浏览器中编辑的。这个代码片段在浏览器刷新的时候既不会消失,也不会推行,除非是你手动推行它。它能够存在你的地面浏览器中,即便关闭浏览器,再一次张开时它依然还在那边。它的第一成效能够使得大家编辑一些品类的测量检验代码时提供方便人民群众,你领会,假如您在编辑器上编写制定这几个代码,在发表时您无法不为它们增加注释符号或许手动删除它们,而在浏览器上编制就无需这么麻烦了。

Snippets分选的空白点右键后选取弹出的new选项,营造三个你和睦的新的公文,然后在区域2种编辑它。

betway体育app 12

 

Snippets 的要命功用强大,它的大多藏匿作用还只怕有待开采。前段时间卤煮使用它是在挥之不去调节和测量试验片段、单元测量试验、一丢丢的效应代码编写效率上。

末尾大家看看js中时间增进的监督检查功能,同上篇作品介绍的一律,Sources面板和Elements面板同样有监察和控制事件的效果与利益,何况Sources中效果尤其丰硕,也愈发强劲。它的这一部分功用聚焦在区域3中。作者以下图为例,观望其功效。

betway体育app 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、在区域第22中学您的断点调节和测验音讯。当某些断点在实施的时候对应的音讯会高亮,双击该处音讯能够在区域第22中学火速牢固。

3、增添的Dom监察和控制新闻。

4、击+ 并输入 UEvoqueL 富含的字符串就能够监听该 U昂科威L 的 Ajax 央求,输入内容就约等于 UMuranoL 的过滤器。尽管什么都不填,那么就监听全体 XH昂科拉诉求。一旦 XH本田CR-V 调用触发时就能在 request.send() 的地点暂停。

5、为网页增添各类别型的断点消息。如选中了Mouse中的某一项(click),当您在网页上起身这一个动作(单击网页自便地点),你浏览器就是及时断点监察和控制该事件。

 

值得再度重复一次,Sources是相似的作用开采中最常用到也是最实用的效劳面板,它里面包车型地铁过多效率对于大家开拓前端工程以来是非常有匡助的。在web2.0时日的明天,作者不引入依然在友好的代码里面写调节和测验消息的一颦一笑,因为那会然你的支付变得繁琐。Chrome开垦工具给我们提供的雄强效率,大家应有好好利用之。那篇小说就到此结束,即便有个别麻烦,但终于基本发挥了卤煮使用经验和想方设法,希望对您有扶持。假如你认为不错,请推荐一下本文并继续关注卤煮在的博客。在下一篇中自身将向我们介绍Chrome开采工具中的品质方面包车型客车调治。

1 赞 15 收藏 3 评论

betway体育app 14

从上到下,玉米黄圈内的数字的含义:

什么样真机调节和测量检验

  • iOS上

安插好相应的调理证书,直接连接线连接到真机械运输营就可以

  • android

摇荡手提式有线电话机,调出Developer Menu面板,在'Developer Menu'下的'Dev Settings'中Debug server host & prot for device配置自身路由器ip地址。端口使用8081就能够

image

image

在模拟器上展开Developer Menu

Android模拟器:
能够经过Command⌘ + M连忙键来火速张开Developer Menu。也得以透过模拟器上的菜单键来打开。

经验:高版本的模拟器平时未有菜单键的,然而Nexus S上是有菜单键的,假使想使用菜单键,能够创造四个Nexus S的模拟器。

iOS模拟器:
能够透过Command⌘ + control + z急迅键来赶快张开Developer Menu。

小技巧:


在上海体育场合中灰圆圈中数字,它们分别代表:

Warning

React Native程序运营时出现的Warnings也会被一贯呈以往荧屏上,以风骚的背景呈现,并会打字与印刷出警示消息,你也得以经过console.warn()来手动触发Warnings,你也能够由此console.disableYellowBox = true来手动禁止使用Warnings的显示,大概经过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

Errors and Warnings

在development形式下,js部分的Errors 和 Warnings会间接打字与印刷在大哥伦比亚大学或模拟器显示器上,以红屏和黄屏体现。

巧用Sources面板

Sources 面板提供了调治将养 JavaScript 代码的效果。它提供了图形化的V8 调节和测量试验器。

 betway体育app 15

Sources 面板能够让您看看你所要检查的页面包车型地铁富有脚本代码,并在面板选用栏下方提供了一组正式控件,提供了暂停,苏醒,步进等职能。在窗口的最下方的开关能够在遇见特别(exception)时强制中止。源码彰显在独立的标签页,通过点击 打开文件导航面板,导航栏中会显示全数已开发的剧本文件。

经验:Chrome开垦着工具中的Sources面板大致是自身最常用的效应面板。日常即使是付出境遇了js报错或然别的代码难点,在审视一遍自身的代码而一贫如洗之后,笔者先是就能张开Sources进行js断点调节和测量检验。

betway体育app 16

有助于时间

  • 小编React Native开源项目OneM地址(依据集团开辟规范搭建框架产生支付的):https://github.com/guangqiang-liu/OneM 欢迎小友人们 star
  • 小编React Native QQ技巧调换群:620792950 招待小伙伴进群沟通学习
  • 终极重申:**支付中有相逢奇骏N相关的技巧难点,招待小同伴参加调换群,在群里提问、相互调换学习。调换群也定时更新最新的EvoqueN学习资料给我们,多谢协助! **
断点其实很简短

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

心得:你可以像使用Xcode/AndroidStudio调节和测量检验Native应用一样,来利用Chrome开拓者工具通过断点对先后开展调节和测验。

真机调节和测验

5、禁止使用全体的断点,不做任何调试

Chrome Developer Tools

Chrome 开荒工具

GoogleChrome开辟工具,是依照Google浏览器内含的一套网页制作和调节和测量检验工具。开垦者工具允许网页开采者深远浏览器和网页应用程序的内部。该工具得以使得地跟踪布局难题,设置 JavaScript 断点并可深切明白代码的最优化攻略。Chrome开采工具一共提供了8大组织工作具:

  • Element 面板: 用于查看和编写制定当前页面中的 HTML 和 CSS 成分
  • Network 面板:用于查看 HTTP 诉求的详细音讯,如央浼头、响应头及再次来到内容等
  • Source 面板:用于查看和调治将养当前页面所加载的剧本的源文件
  • TimeLine 面板: 用于查看脚本的举行时间、页面成分渲染时间等音信
  • Profiles 面板:用于查看 CPU 实行时间与内部存款和储蓄器占用等消息
  • Resource 面板:用于查看当前页面所乞求的财富文件,如 HTML,CSS 样式文件等
  • 奥迪ts 面板:用于优化前端页面,加快网页加载速度等
  • Console 面板:用于显示脚本中所输出的调节和测量检验消息,或运转测量检验脚本等

注意: 对于调节和测量试验React Native应用来讲,Sources和Console是应用功效最高的七个工具

你能够像调节和测量试验JavaScript代码同样来调解你的React Native程序

高档操作

上文讲到右键点击松石绿标签会张开四个菜系,下面就介绍一下该菜单下的高等操作。

推行到此(Continue to Here):

一旦您想让程序及时跳到某一行时,那个效用会帮到你。假设在该行此前还可能有别的断点,程序会挨个通过前边的断点。其他索要提议的是以此功效在自由一行代码的边栏(gutter line)前单击右键都会看到。

黑盒脚本(Blackbox scripts):

黑盒脚本会从你的调用商旅中暗藏第三方代码。

编辑断点(Edit Breakpoint):

因而该意义你能够成立四个原则断点,你也得以在边栏(gutter line) 右键并精选充分条件断点(Add Conditional Breakpoint) 。在输入框中,输入三个可解析为真或假的表达式。仅当法规为真时,执行会在当中断。

betway体育app 17

经验:假设您想让程序在某处平昔都不用暂停,能够编写二个条件永恒为false的规格断点。其余,你也得以在该行代码的边栏(gutter line)前单击右键选择“Never pause here”就可以,你会发掘“Never pause here”其实便是在该行代码上设了四个永远为false的条件断点。

betway体育app 18

Android模拟器:

能够因而Command⌘ + M快捷键来急速展开Developer Menu。也足以通过模拟器上的菜单键来张开。

感受:高版本的模拟器平日未有菜单键的,可是Nexus S上是有菜单键的,假设想选取菜单键,可以创立三个Nexus S的模拟器。

betway体育app 19

断点

断点(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

小技巧:Automatic reloading

Reloading JavaScript

在只是修改了js代码的场所下,借使要预览修改结果,你没有须求再行编写翻译你的选择。在这种意况下,你只供给报告React Native重新加载js就能够。

唤醒:就算你改改了native 代码或涂改了Images.xcassets、res/drawable中的文件,重新加载js是极度的,那时你要求再度编译你的门类了。

从上航海用教室能够看到js实施到断点处时各地的浮动,首先是区域3中的Breakpoints记录消息会变高亮,然后是区域4中Scope 选项中列出了断点处私有和国有的变量消息,那样,作者得以很直观地掌握,此时此刻js的实市场价格况。同样的,你能够把鼠标放到区域2种的某部变量上,浏览器会弹出三个小框框,框框里面则是您悬浮其上的变量全部消息:

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

Chrome 开拓工具

谷歌(Google) Chrome 开拓工具,是依据Google浏览器内含的一套网页制作和调节和测验工具。开辟者工具允许网页开拓者深切浏览器和网页应用程序的在那之中。该工具得以使得地追踪布局难题,设置 JavaScript 断点并可浓厚精通代码的最优化战略。 Chrome 开采工具一共提供了8大组织工作具:

  • Element 面板: 用于查看和编写制定当前页面中的 HTML 和 CSS 成分。
  • Network 面板:用于查看 HTTP 央浼的详细消息,如央求头、响应头及重返内容等。
  • Source 面板:用于查看和调护治疗当前页面所加载的脚本的源文件。
  • TimeLine 面板: 用于查看脚本的实施时间、页面成分渲染时间等音信。
  • Profiles 面板:用于查看 CPU 实行时间与内存占用等新闻。
  • Resource 面板:用于查看当前页面所伏乞的财富文件,如 HTML,CSS 样式文件等。
  • 奥迪ts 面板:用于优化前端页面,加快网页加载速度等。
  • Console 面板:用于体现脚本中所输出的调节和测验新闻,或运转测试脚本等。

晋升:对于调节和测量试验React Native应用来讲,Sources和Console是运用频率非常高的三个工具。

您能够像调节和测验JavaScript代码一样来调解你的React Native程序。

断点其实相当粗略

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

心得:你能够像使用Xcode/AndroidStudio调节和测量检验Native应用一样,来利用Chrome开采者工具通过断点对前后相继开展调养。

在Snippets选项的空白点右键后采用弹出的new选项,创建二个你和煦的新的文书,然后在区域2种编辑它。

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⌘ + 福特Explorer 不可能令你的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。
预览图

betway体育app 20

Developer Menu.jpg

原来的文章链接:

betway体育app 21

控制台

DevTools调节台(Console)能够令你在这几天已暂停的情状下进行考试。按 Esc 键打开/关闭调整台

您能够在调整台(Console)上打字与印刷变量,施行脚本等操作。在开采调节和测量检验中最常用

image

Warnings

React Native程序运转时出现的Warnings也会被一贯体今后显示屏上,以深橙的背景展示,并会打印出警示音讯。 你也得以由此 console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁止使用Warnings的显得,大概经过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。

betway体育app 22

Warnings.png

提醒:在生产条件release (production)下Errors和Warnings功用是不可用的。

Hot Reloading

betway体育app 23

除此以外,Developer Menu中还应该有一项须求特意介绍的,正是”Hot Reloading”热加载,如若说Enable Live Reload解放了您的单手的话,那么Hot Reloading不但解放了您的双手并且还解放了你的小时。 当你每一回保存代码时Hot Reloading成效便会转移此番修改代码的增量包,然后传输到手提式有线电话机或模拟器上以贯彻热加载。相比较Enable Live Reload须求每一回都回来到运维页面,Enable Live Reload则会在保持你的主次状态的情事下,就能够将流行的代码安顿到装备上,听上去是或不是很疯狂啊。

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

betway体育app 24

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 能够经过Command⌘ + D飞快键来火速打开Developer Menu
  • android模拟器
    • 能够经过Command⌘ + M快速键来火速张开Developer Menu。也得以透过模拟器上的菜单键来张开

真机开启Developer Menu

  • iOS和Android真机通过摇入手机来拉开Developer Menu
在Android上

方式一:
在Android5.0以上设备上,将手提式有线电电话机通过usb连接到你的管理器,然后经过adb命令行工具运营如下命令来安装端口转载。
adb reverse tcp:8081 tcp:8081
方式二:
你也足以因此在“Developer Menu”下的“Dev Settings”中安装你的计算机ip来进展调节和测量试验。

感受:在运用真机调节和测验时,你需求保障您的手机和管理器处在同多个网段内,即它们其实同二个路由器下。

何以通过 Chrome调节和测量检验React Native程序

您能够透过以下步骤来调治你的React Native程序:

betway体育app 25

Error

React Native程序运转时出现的Error会被直接展现在显示屏上,以月光蓝的背景体现,并会打字与印刷出错误新闻, 你也能够经过 console.error()来手动触发Error

img

注意: 在生育条件release下Error和Warning功用不在生效

什么样通过 Chrome调节和测量试验React Native程序

您能够通过以下步骤来调度你的React Native程序:

查看js文件

即使您想在开采者工具上预览你的js文件,能够在开拓Sources tab下的debuggerWorker.js选项卡,该选项卡下会呈现当前调节和测验项目标兼具js文件。

betway体育app 26

本文由必威发布于必威-前端,转载请注明出处:高效的调试不仅能提高开发效率betway体育app,N

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。