浏览器调试基础

浏览器调试基础

以下调试说明基于Chrome浏览器

开发者控制台

通过option+command+c启动调试控制台控制台。(Windows F12

浏览器控制台选项

从左到右依次是:

  1. 审查元素
  2. 手机模式
  3. 页面DOM信息查看
    一般用来看页面DOM和调样式
  4. 输出控制台
    查看输出和向页面输入简单的JS命令
  5. 源码文件
    用来检索源码和进行断点调试
  6. 网络请求
    查看页面资源加载和网络数据请求,控制页面缓存
  7. 页面显示帧分析
    分析页面首屏加载
  8. 内存分析
  9. 浏览器存储相关
    查看localStorage、cookie等浏览器存储
    ...

界面调试

浏览器的界面调试一般是审查元素,然后在Elements里查看相关的信息。
Styles,查看页面元素的样式,并且可以实时修改查看样式效果。
Computed,查看当前元素有效的样式,并查找到是那里赋予的样式。

JS代码调试

打印调试

所有的console都可以从Console Tab里看到,Console Tab也会显示页面的警告以及错误信息。

断点调试

打开Sources,在第二行第一个选项Page里可以找到你们当前页面的文件,也可以通过Command+P查找源码文件,在相应的行点击会进行断点。

浏览器调试基础_第1张图片
断点控制器

第一排前两个按钮分别为:恢复断点和步进。
第一排以下分别为:

  1. Watch 变量监控(可以添加和刷新变量)
  2. Call Stack(调用栈查看)
  3. Scope(变量查看)
  4. Breakpoints(断点控制)

也可以修改文件代码进行调试,但是不会保存到文件中

测试代码编写

可以在Sources的选项卡Snippets新建一个JS文件,右下角可以点击运行,在Console中可以查看脚本输出

传送门
前端chrome浏览器调试总结
Chrome调试
火焰图--阮一峰

React调试

浏览器调试的方式都可以用到React调试上,但是因为React是编译过的,所以在Elements里面看到的Dom结构会比较乱一些,facebook做了一个chrome插件React Develop Tools用作React调试,提供了额外的一些调试能力。

在Chrome Store下载React Develop Tools或者使用离线的ctr之后,会在浏览器右侧有一个React调试插件检测当前页面是否为React编写的页面,并且在开发者调试上提供了额外的React Tab,如下


React Develop Tools
浏览器调试基础_第2张图片

在上面这个界面中,可以在Elements里搜索写好的对应组件,右侧可以查看Props和State,以及该组件的style。也可以通过右侧的设置,开启更新高亮和搜索高亮。


浏览器调试基础_第3张图片
Setting

传送门
Optimizing Performance
facebook/react-devtools

你可能感兴趣的:(浏览器调试基础)