专栏首页小康的自留地Chrome代码调试指南

Chrome代码调试指南

打开开发者工具

  1. 在Chrome菜单选择:更多工具->开发者工具
  2. 在页面原色上右键单击,选择检查
  3. 快捷键
    • 打开最近关闭状态 cmd+opt+ictrl+shift+i
    • 快速查看DOM或样式 Command+Option+cControl+shift+c
    • 快速进入Console查看log运行JavaScript Command+Option+jControl+shift+j
    • F12打开

使用Elements调试DOM

查看与选择DOM节点

  1. 将鼠标移动到需要被查看的元素
  2. 右键选择检查

通过开发者工具左上角的小箭头可以选择需要查看的元素

通过如上图所示按钮,也可以定义调试工具所处位置。

实时编辑HTML和DOM节点

在调试工具处,双击 dom 节点即可进入编辑。

也可以通过右键节点选择编辑 HTML 模式。

在 Console 中访问节点

  1. 通过 document.querySelectAll 访问
  1. 通过 $0 快速访问选中元素
  1. 拷贝 ->js path

复制出的路径是通过 querySelector 接口选择的元素

给 DOM 中断点调试

  1. 在属性修改时打断点
  2. 节点删除时打断点
  3. 子树修改时打断点

通过对需要调试元素右键选择 break on 即可选择调试方式。

调试样式及 CSS

查看与编辑 css

在调试工具右侧即可看到样式

通过 filter 也可以过滤(搜索)某个属性

点击空白处也可以新增属性;点击前边的勾也可以使此属性失效。

在元素中增加类与伪类

  1. 通过点击 hov 按钮,可以选择伪类。例如点击:hover 表示模拟鼠标悬停。
  1. 点击 cls 按钮,可以为元素添加一个类
  1. 点击加号,表示可以新建一个类

快速调试 CSS 数值及颜色图形动画

当鼠标悬停到... 图标时可以看到如下

点击即可展开可视化界面。

通过选择 more tools -> Animations 即可调出动画窗口。

当触发动画时就会自动录制,并且可以通过下方的属性可视化调试。

使用 Console 调试 Javascript

Console 交互式命令

在 Console 处可以写任意 JavaScript 代码。

在 Console 中调试 log 消息

  1. 普通信息
console.log('普通信息')
  1. warn 告警信息
console.warn('告警信息')
  1. 错误信息
console.error('错误信息')
  1. 展示 json 格式的复杂信息
var t = [
    {name:'666',age:'17',sex:'男'},
    {name:'666',age:'17',sex:'男'},
    {name:'666',age:'17',sex:'男'}
]
console.table(t)
  1. 信息组展示
var label = '一组信息'
console.group(label)
console.info('Log')
console.info('warn')
console.info('error')
console.groupEnd(label)
  1. 定制样式
var styles = 'color:red;background:black;font-size:20px;'
console.log("%c样式展示",styles)
  1. 网络请求错误展示 当请求资源不存在或其他信息时打印的日志。
  1. 断言
console.assert(false,'断言失败')
  1. 查看代码执行时间
console.time()
var l = 1
console.timeEnd()
  1. 清除打印日志
console.clear()

调试 JavaScript 的基本流程

  1. 在代码中写入 debugger
  2. 断点调试

可以通过图中表示的几个按钮进行调试。按钮从左向右依次表示

  • 恢复代码执行
  • 跳过下一个函数执行
  • 进入下一个函数执行
  • 跳出函数
  • 单步执行

也可以通过下方事件进行监听。

Sources 面板

  1. 调出面板

左侧为全局的静态资源,选择一个文件也可以对源文件进行编辑。

  1. 按住 ctrl+p 可以全局搜索某个资源
  1. 按住 ctrl+shift+p 可以输入一些命令

使用 Snippets 来复制 Debugging

简单来说就是为当前页面新加一个代码片段。

  1. 打开 Snippets 面板
  1. 编写需要添加的代码片段
  1. 执行代码片段
  1. 即可看到 console 里边输出了 test

使用 DevTools 作为 Text IDE

  1. 通过 Sources->Filesystem 唤起面板
  1. 添加文件夹 添加文件夹需要允许浏览器获取权限
  1. 注意 在此修改的内容等同于直接修改文件。

调试网络

Network 面板

使用 Network 详细分析请求

  1. filter 过滤只能过滤出下方已经展示的请求包含的地址。而无法过滤内容。
  2. 搜索 可以搜索到返回数据内容
  3. Preserver log 可以在跳转时保留网络请求日志
  4. Disable cache 不使用缓存

使用 Network Waterfall 分析页面载入性能

客户端存储 Application 面板

通过上方的 filter 可以进行过滤,同样的也可以删除或新增 Cookie。

查看 LocalStorage 与 SessionStorage

与 Cookie 类似。

移动端 H5 页面调试

模拟移动端设备

使用 Chrome DevTools 进行 H5 页面开发

  1. 通过使用 show sensors 命令呼出 Sensors 面板进行调试

在 Edge 中为传感器。

  1. 网络菜单

在 chrome 为 network

在 Chrome DevTools 中集成 React 和 Vue 插件

集成 React 插件

由于国内无法使用 Google 商店,因此建议使用 Edge 商店。

安装此插件后,如果网页是由 react 开发的,那么开发者工具会多出一个 react 的选项,并且插件图标是点亮的。

集成 VUE 插件

与 React 插件类似。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于面向对象的工具库练习

    解决这个问题是通过匿名函数,然后在匿名函数内创建对象,将window作为参数传入匿名函数,并将此对象赋值与window

    Dreamy.TZK
  • 跨域资源共享

    CORS全称为Cross-Origin Resource Sharing,被译为跨域资源共享,新増了一组HTTP首部字段,允许服务器声明哪些源站有权限访问哪些资...

    Dreamy.TZK
  • 优雅解决LeanCloud流控问题

    最近好多人遇到了"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠"。我也遇到了这种问题,太难受了。难道白嫖结束了,羊被薅死了?

    Dreamy.TZK
  • Effective Modern C++翻译(5)-条款4:了解如何观察推导出的类型

    条款4:了解如何观察推导出的类型 那些想要知道编译器推导出的类型的人通常分为两种,第一种是实用主义者,他们的动力通常来自于软件产生的问题(例如他们还在调试解决中...

    magicsoar
  • python︱numpy、array——高级matrix(替换、重复、格式转换、切片)

    版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!! htt...

    素质
  • 云服务存在局限性,你如何找到最合适的解决方案

    云计算不仅仅代表着近乎无限的资源,我们也需要了解其中可能存在的种种性能问题。 以Amazon AWS与微软Azure为代表的公有云服务属于基于控制台的编排方案,...

    静一
  • MAC OS上快速修改hosts

    在MAC上需要临时绑定域名测试站点,或者锁定APP更新等操作时,修改hosts可以通过命令行实现,文件位置为 /etc/hosts,但是该文件默认登陆用户没有写...

    大大大黑白格子
  • 薅羊毛 | 让Python每天帮你薅一个早餐钱

    以今日头条极速版为首,包含趣头条、东方头条、全名小视频在内的 App 都有看新闻、视频送金币的活动,当金币达到一定量后,就可以提现到微信、支付包。

    用户2769421
  • 高质量jQuery代码的十二条经验

    1、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现...

    JKXQJ
  • 薅羊毛 | 让Python每天帮你薅一个早餐钱

    以今日头条极速版为首,包含趣头条、东方头条、全名小视频在内的 App 都有看新闻、视频送金币的活动,当金币达到一定量后,就可以提现到微信、支付包。

    sergiojune

扫码关注云+社区

领取腾讯云代金券