草庐IT

前端必须知道的调试工具

莫听穿林打叶声 何妨吟啸且徐行 2023-03-28 原文

Bug和Debug

Bug的起源：

当时人们还在使用第一代真空计算机（马克二型），这种计算机是依靠控制电流来改变开关，从而实现控制，但是它会发出大量的热和光。

1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。

前端Debug的特点：

  1. 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用
  2. 多环境：本地开发环境、线上开发环境
  3. 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
  4. 多技巧：Console、BreakPoint、SourceMap、代理

Chrome DevTools

Elements 元素

  • 动态修改元素和样式
  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到style面板中的css规则

可以用以下2种方式强制激活伪类：

  • 选中具有伪类的元素：点击：hov
  • DOM树右键菜单：选择Force State

Console 日志

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info
  • console.table (具象化的展示JSON和数组数据)

占位符：

给日志添加样式，可以突出重要的信息

%s：字符串占位符、%o：对象占位符、%c：样式占位符、%d：数字占位符

（巧用console来Debug）

Score Tab

  • 区域1：页面资源文件目录树
  • 区域2：代码预览区域
  • 区域3：Debug工具栏（从左到右：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处截断）
  • 区域4：断点调试器
Break Point & Watch

  • 使用关键字 debugger 或 代码预览区域的行号可以设置断点
  • 执行到断点处时代码暂停执行
  • 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
  • 暂停状态下鼠标hover 变量可以查看变量的值
  • 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
Scope & CallStack

展开 Scope 可以查看作用域列表(包含闭包),闭包可以参考
https://developer.mozilla.org/en-US/docseb/JavaScript/Closures
展开Call Stack 可以查看当前javaScript代码的调用栈,关于调用栈可以参考
https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

压缩后的代码如何调试？

前端代码天生具有“开源”属性，出于安全考虑，Js代码通常会被压缩，压缩后的代码只有一行，变量使用字母替换，整体变得不可阅读，那么压缩后的代码如何调试呢？


解决： 压缩时先产生source map文件，以便后续查看

mappings 字段存储了源文件和 SourceMap 的映射

  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分隔一行代码中的内容。
  • 分号，代表换行。之所以没有显示分号是因为压缩后的代码就只有一行

既然 Source Map 可以映射源码，那压缩后的代码不就又不安全了吗?
https://blog.csdn.net/m0_67392273/article/details/126496551

Performance

  • 区域1: 控制面板
  • 区域2: 概览面板
  1. FPS:每秒顿数
  2. CPU: 处理各个任务花费的时间
  3. NET:各个请求花费时间
  • 区域3: 线程面板
  1. Frames: 顿线程
  2. Main:主线程，负责执行
  3. Javascript,解析HTML/CSS,完成绘制
  4. Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制
  • 区域4: 统计面板

Network

  • 区域1: 控制面板
  • 区域2: 过滤面板
  • 区域3: 概览区域
  • 区域4: Request Table 面板
  • 区域5:总结面板
  • 区域6:请求详情面板

Application


Application 面板展示与本地存储相关的信息

  • Local Storage
  • Session Storage
  • IndexedDB
  • Web SOL
  • Cookie

点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据

常用工具

  • Charles：适合查看、控制网络请求、分析数据
  • Fiddler：与Charles类似，适合windows平台
  • spy-debugger：远程调试手机页面、抓包
  • Whistle：基于Node实现的跨平台Web调试代理工具

常用开发调试技巧

  • 线上即时修改 Overrides
  1. 打开 sources 面板下的的Overrides
  2. 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
  3. 允许授权
  4. 在 page 中修改代码，修改完成后ctrl +s保存
  5. 打开 devTools ，点击右上角的三个小5.点->More tools ->Changes，就能看到所有修改了
  • 利用代理解决开发阶段的跨域问题
  • 启用本地source map
  • 小黄鸭调试大法！

前端必须listrong1fbpfcp软件测试

有关前端必须知道的调试工具的更多相关文章

  1. ruby-on-rails - 无法让 rspec、spork 和调试器正常运行 - 2

    GivenIamadumbprogrammerandIamusingrspecandIamusingsporkandIwanttodebug...mmm...let'ssaaay,aspecforPhone.那么，我应该把“require'ruby-debug'”行放在哪里，以便在phone_spec.rb的特定点停止处理？(我所要求的只是一个大而粗的箭头，即使是一个有挑战性的程序员也能看到:-3)我已经尝试了很多位置，除非我没有正确测试它们，否则会发生一些奇怪的事情:在spec_helper.rb中的以下位置:require'rubygems'require'spork'

  2. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  3. ruby-on-rails - 如何调试 cucumber 测试？ - 2

    我有:When/^(?:|I)follow"([^"]*)"(?:within"([^"]*)")?$/do|link,selector|with_scope(selector)doclick_link(link)endend我打电话的地方:Background:GivenIamanexistingadminuserWhenIfollow"CLIENTS"我的HTML是这样的:CLIENTS我一直收到这个错误:.F-.F--U-----U(::)failedsteps(::)nolinkwithtitle,idortext'CLIENTS'found(Capybara::Element

  4. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  5. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  6. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  7. ruby - Ruby 是否有类似于 Perl 的 "perl -d"的逐步调试器？ - 2

    Ruby是否有逐步调试器，类似于Perl的“perl-d”？ 最佳答案 ruby-debug(对于ruby1.8)，debugger(对于ruby1.9)，byebug(对于ruby​​2.0)以及trepanning系列都有一个-x或--trace选项。在调试器内部，命令setlinetrace将打开或关闭线路跟踪。这是themanualforruby-debug原来的答案已经修改，因为数据噪声文章的链接，唉，不再有效了。还添加了ruby​​-debug的后继者 关于ruby-Ruby

  8. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  9. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  10. ruby - 为什么必须明确指定 2 个参数才能 curry :> - 2

    考虑这个，它工作正常::>.to_proc.curry(2)[9][8]#=>true,because9>8然而，即使>是一个二元运算符，如果没有指定的元数，上面的代码将无法工作::>.to_proc.curry[9][8]#=>ArgumentError:wrongnumberofarguments(0for1)为什么两者不等价？注意:我特别想用提供的一个参数创建中间柯里化(Currying)函数，然后然后调用然后用第二个参数调用它。 最佳答案 curry必须知道传入的过程的数量，对吧？:-1来自arity的负值令人困惑，但基本上

随机推荐