狗万官网酒店 > 狗万官网下载 > 利用VScode 硬件debugger for chrome 调整react源码的主意_javas

利用VScode 硬件debugger for chrome 调整react源码的主意_javas

来源: 2019-09-16 09:49 我来投稿 参与评论
这篇文章主要介绍了利用VScode 硬件debugger for chrome 调整react源码,文中通过示范代码介绍的独特详细,对大家的上学或者工作具有原则性的参考学习价值,要求的朋友们下面随着小编来累计学习学习吧

代码调试,是咱们前端日常工作中必不可少的力量了吧!

在面向dom付出的年月,咱开发时直接在chrome阴打断点是很红火的。
但是,顶我们面向组件开发时(react),探测器拿到的是咱们编译过之后的编码,还想在新石器里打断点几乎是不可能的了。

此情此景

那怎么办,艺术总是比困难多!愚蠢的我想到了console/debugger!!一直在利用,虽然很艰苦(打印太多实在太乱!上点还要配置删除掉),但是我竟然使用了很久(这真是一个糟糕的编码习惯吧)。直到今天,我想研究一下react源码,要求断点的中央有很多,不可能在手动console/debugger了!!我才想到我为什么不用浏览器debugger?

Debugger for Chrome

因为我利用的热水器是VS code,机智的我终于开窍了!找来了 Debugger for Chrome硬件。

但是纯英文的文档不太对劲儿,虽然我英语六级也是搞了很久才弄好,下就介绍记录一下mac系统下的采取办法吧。总体文档需要可以团结看文档

1、加载插件

2、布局插件

点击小虫子;分选chrome;

接下来点击小轮子,开辟launch.json文件如下:

{
 // 利用 IntelliSense 刺探相关属性。 
 // 停止以查看现有属性的叙说。
 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [

  {
   "type": "chrome",
   "request": "launch", //launch / attach 两种办法;此地使用launch
   "name": "Launch Chrome against localhost",//开心的安装个名字
   "url": "http://localhost:9000",//品种地址
   "webRoot": "${workspaceFolder}/react-demo/"
   //这一块设置时要小心!webRoot指定网络服务器根目录的上班区绝对路径。
   ${workspaceFolder}应当时表示编辑器里之根目录,我之档次是react-demo,
   故而选择webRoot修改如上,实际途径还跟webpack布局的辐射源根目录也有联系

  }
  //还有许多可以配置的习性,可以通过上面文档查看
 ]
}

3、初步调整

点击小按钮,就开始调整模式了;像下面就能在我们的编码打断点;

初步调整后,多出来一个小窗,可以操纵断点走向,以及结束暂停、调整。世间会显示断点列表。

同时,会为我们开辟我们配备的url页面;

还可以见到调用堆栈,和打印台,可以说十分红火

OK到此处我们的react调整配置已经足以利用了,不用在手动写debug了!可以开始愉快的搬砖了

上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?