search

anjia / blog

博客，积累与沉淀
106 stars 4 forks source link

Chrome DevTools 的使用 #47

Open anjia opened 5 years ago

anjia commented 5 years ago

目录

  1. Elements + Console + Debugger
  2. Sources + Application 的补充
    • 理解 web 资源

    • 43

  3. Console 的补充
  4. DevTools 的相关
  5. Network 面板的使用
  6. 移动端调试
    • DevTools 相关
    • 远程调试
anjia commented 5 years ago

1. Elements + Console + Debugger

DOM

PC+移动，q=刘德华

增删改查

CSS

移动.q=刘德华，百科.作品."无间道"

Styles 窗格

Computed 窗格

Styles + Computed -> CSS 的 Cascading 和 Inherit

  • Cascade：级联 -> CSS 声明的权重 -> 优先级
  • Inherit

增删改查

本地修改

使用 DevTools 的工作区设置持久化

Sources 面板：

Debugger

console 输出

var name = 'anjia'
console.log('名字 ' + name)
console.log('名字', name)
console.log('名字 %s', name)

格式说明符：

DOM 元素 -> JS 对象的格式：

console.log(document.body)

console.log('%O', document.body)
console.dir(document.body)

不同类型：

console.log('我是一条日志.log')
console.info('我是一条日志.info')
console.warn('我是一条日志.warn')
console.error('我是一条日志.error')

有用的：

示例可查看：devtools/console.html

更多可查看：

设置断点

如果不清楚详细逻辑

debug(functionName)，在控制台输入，当指定函数被调用时 调试时的辅助手段，因为需保证functionName在作用域内

修复错误时，可直接先在 Source 里修改验证下，cmd+s -> 会修补到 Chrome 的 JS 引擎里

anjia commented 5 years ago

3. Console 的补充

日常使用：

更精细化控制台：

  1. 输出表格 table()
  2. 设置控制台样式 %c
  3. inspect()
    • DOM 元素 -> Elements 面板
    • JS 对象 -> Profiles 面板
    • 函数 -> Source 面板

快捷方式：

其它：

anjia commented 5 years ago

4. DevTools 的相关

anjia commented 5 years ago

5. Network 面板的使用

最常用的：

请求表格：

分析：

其它：