>

这次分享的是Chrome开发工具中最有用的面板澳门

- 编辑:澳门博发娱乐官网 -

这次分享的是Chrome开发工具中最有用的面板澳门

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

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

初稿出处: 卖BBQ夫斯基   

上篇向大家介绍完了基础作用篇,本次分享的是Chrome开荒工具中最平价的面板Sources。  Sources面板大约是本人最常用到的Chrome效率面板,也是以小编之见决解一般难题的重大要义面板。日常如若是付出遭受了js报错可能别的代码难点,在审美一次本身的代码而一无所得之后,作者首先就能展开Sources进展js断点调节和测验,而它也大致能缓和笔者70%的代码难题。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: 包涵该类型的静态能源文件。双击选汉语件,该文件内容会在区域第22中学显得,假若您选中的是js文件,那么你能够在区域2种单击行号进行断点调节和测量试验,只要js实施到了您所标志的这一行,它会结束向下实行并且等待你的通令:

澳门博发娱乐官网 3

从上海体育场所能够观察js实施到断点处时各个地方的改换,首先是区域3中的Breakpoints记录音讯会变高亮,然后是区域4中Scope 分选中列出了断点处私有和国有的变量音讯,那样,笔者得以很直观地知道,此时此刻js的试行景况。同样的,你能够把鼠标放到区域2种的某部变量上,浏览器会弹出一个小框框,框框里面则是你悬浮其上的变量全数消息:

 

澳门博发娱乐官网 4

下一场,你可以按F10随后js实行的路线一步一步地走下去,假诺你遇上了多少个函数富含着其它三个函数,那么您能够按F11进去到个函数中去考查它的代码施行活动。你也足以经过点击区域1尾部的顺序Logo对js代码进行追踪。不过小编提出您利用快速键,故名思义,因为它比较便捷实惠。可是怎么用完全依据个人习贯来呢。下图是逐条开关的功能意义。

 

澳门博发娱乐官网 5

 

 在上海图书馆栗褐圆圈中数字,它们分别表示:

  1、甘休断点调节和测量试验

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

  3、跳入函数中去(F11)

  4、从进行的函数中跳出

  5、禁止使用全体的断点,不做别的调节和测量检验

  6、程序运维时遇见特别时是或不是中断的开关

接下去在区域4种切换来Watch Expressions 选项,它的功效是为眼下断点增多表明式,使得每便断点往下走一步都会试行你写下的js代码。须要专心的是那些意义亟须小心翼翼采纳,因为那恐怕会导致你写下的监控代码段会不断地被执行。

澳门博发娱乐官网 6

 

为了幸免你的调弄整理代码重复实施,大家得以在调整时直接在console调节台上三遍性地出口当前断点处的新闻(推荐那样做)。为了验证大家在console面板中兼有的是现阶段断点蒙受,作者门能够相比较断点实行前后的this值变化。

澳门博发娱乐官网 7      澳门博发娱乐官网 8

借使您以为在断点的时候为了看二个变量必需借用console面板输出的艺术来查看会比较费心,那么您可以革新最新版的Chrome,它已经为大家消除了那么些烦恼。为了有助于开拓者调试,在那或多或少上谷歌(Google)早就成功了极其,就在今日更新过Chrome以往,卤煮意各市开掘了断点时监察和控制情形变量的别的一种艺术,这种方法极为清晰,在断点调节和测量检验的时候,区域第22中学会自动显示每一个变量的值,每回代码往下走的时候这几个值都回时时更新。那让开辟者对当前境遇变量大概可以说是吃透。(此意义有叁个小劣势,那便是无力回天查看数组或许指标的切切实实索引和值,不过本身相信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、在区域第22中学您的断点调节和测量检验音讯。当有些断点在实施的时候对应的信息会高亮,双击该处音讯方可在区域第22中学异常的快稳固。

3、增添的Dom监察和控制消息。

4、击+ 并输入 ULANDL 包涵的字符串就能够监听该 U本田CR-VL 的 Ajax 央浼,输入内容就也就是 U大切诺基L 的过滤器。假设什么都不填,那么就监听全数 XH揽胜极光央浼。一旦 XHWrangler 调用触发时就能在 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 MenuChrome 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是不可用的。

在做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⌘ + 奇骏 不大概让你的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

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

Android模拟器:
能够经过Command⌘ + M火速键来赶快展开Developer Menu。也得以通过模拟器上的菜单键来开拓。

感受:高版本的模拟器平常未有菜单键的,不过Nexus S上是有菜单键的,借使想利用菜单键,能够创设二个Nexus S的模拟器。

iOS模拟器:
能够通过Command⌘ + control + z快捷键来相当慢展开Developer Menu。

如何打开Developer Menu

澳门博发娱乐官网 15

Error

React Native程序运维时出现的Error会被直接突显在显示器上,以革命的背景彰显,并会打字与印刷出错误音信, 你也能够透过 console.error()来手动触发Error

img

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

在真机上开启Developer Menu

在真机上您能够经过摇晃手机来展开Developer Menu。
预览图

澳门博发娱乐官网 16

Developer Menu.jpg

在模拟器上展开Developer Menu

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是老大的,那时你须要重新编写翻译你的档期的顺序了。

Android模拟器:

可以因此Command⌘ + M火速键来飞速张开Developer Menu。也得以透过模拟器上的菜单键来打开。

心得:高版本的模拟器经常没有菜单键的,不过Nexus S上是有菜单键的,假若想使用菜单键,能够创立叁个Nexus S的模拟器。

首先大家来看区域1,它的功能有个别临近于Resources面板,首若是显得网页加载的脚本文件:举例css, js等能源文件(它不分包cookie,img等静态能源文件)。

Chrome Developer Tools

Chrome 开采工具

谷歌(Google)Chrome开采工具,是依据谷歌(Google)浏览器内含的一套网页制作和调整工具。开垦者工具允许网页开垦者深入浏览器和网页应用程序的在那之中。该工具得以有效地跟踪布局难题,设置 JavaScript 断点并可深切明白代码的最优化战术。Chrome开荒工具一共提供了8大组织工作具:

  • Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 元素
  • Network 面板:用于查看 HTTP 诉求的详细音信,如央浼头、响应头及重回内容等
  • Source 面板:用于查看和调度当前页面所加载的本子的源文件
  • TimeLine 面板: 用于查看脚本的施行时间、页面成分渲染时间等消息
  • 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⌘ + 途锐不可能使您的iOS模拟器加载js,则足以由此选中Hardware menu中Keyboard选项下的 “Connect Hardware Keyboard” 。

iOS模拟器:

能够因此Command⌘ + D火速键来非常快张开Developer Menu。

澳门博发娱乐官网 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

在真机上开启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 调出文件搜索直接开展搜寻,那几个更是方便飞速

Enable Live Reload

澳门博发娱乐官网 18

Enable Live Reload.gif

React Native意在为开拓者带来三个越来越好的支付体验。若是你感到上文的加载js代码形式太low了仍然非常不足方便,那么有未有一种更便捷加载js代码的艺术呢?
答案是听其自然的。
在 Developer Menu中您拜望到”Enable Live Reload” 选项,该选拔提供了React Native动态加载的成效。当您的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手提式有线电话机上,是否以为很有利。

预览图

澳门博发娱乐官网 19

Sources: 包蕴该类型的静态能源文件。双击选普通话件,该公文内容会在区域第22中学呈现,即便你选中的是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

澳门博发娱乐官网 20

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做布局的实时预览相比美。

Reloading JavaScript

在只是修改了js代码的景况下,即便要预览修改结果,你没有需求重新编写翻译你的采用。在这种情形下,你只供给告诉React Native重新加载js就可以。

唤醒:要是你改改了native 代码或改造了Images.xcassets、res/drawable中的文件,重新加载js是非常的,那时你要求再度编写翻译你的类型了。

本文由胜博发-前端发布,转载请注明来源:这次分享的是Chrome开发工具中最有用的面板澳门