-
1.conso.log()
2.debugger
3.恢复脚本执行、跳过下一个函数的执行、进入到下一个函数的执行、跳出函数、单步执行
4.调用的栈、断点、异步请求的断点、DOM断点、global listeners、事件监听断点
5.打断点
6.addend1和addend2都是string类型
查看全部 -
1.console.log 打印信息
2.console.warn 告警信息
3.console.error 打印错误信息
4.console.table 打印json格式的数据信息，表格
5.console.group+console.info+console.grounpEnd 打印信息组
6.console.log("%c这里展示定时的样式",styles) console Custom定制样式
7.cause 404 Network网络请求错误展示
8.console.assert(false,'断言') 断言类似于try catch语句
9.console.time() +函数名(参数) + console.timeEnd() 检测代码片段执行时间
查看全部 -
ctrl shift p Show Sensors
查看全部 -
Snippets 注入jquery
查看全部 -
Snippets 注入jquery
查看全部 -
快捷键
查看全部 -
工欲善其事必先利其器
查看全部 -
集成 Vue 插件
1、扩展程序安装Vue
2、打开开发工具使用Vue
查看全部 -
集成 React 插件
1、安装扩展程序react
2、打开开发工具使用react(基于组件开发方便)
查看全部 -
使用 Chrome DevTools 进行 H5 页面开发
1、菜单简介:
1⃣️模拟手机外壳2⃣️显示media queries3⃣️显示尺寸Px4⃣️设备比例5⃣️添加/移除设备类型(mobile)6⃣️截图
2、模拟横、竖或其他情况的设备
1):在 More Tools 菜单下，点击 Sensors
2)sensors面板设置
3、network网络状况
1)在 More Tools 菜单下，点击 network conditions
2) network conditions面板
查看全部 -
模拟移动设备
点击工具:
切换设备模拟:
查看全部 -
查看与调试 LocalStorage 与 SessionStorage
1、LoalStorage(永久存储在站点的本地存储下)
2、SessionStorage(关闭后Session结果不存在)
查看全部 -
查看与调试 Cookie
查看全部 -
使用 Network Waterfall 分析页面载入性能
1)页面请求总览概况
2)查看单一请求具体Timing时间
查看全部 -
1)功能栏作用:
1⃣️打开/关闭加载监控Network日志 2⃣️清除加载请求 3⃣️页面加载截图 4⃣️过滤 5⃣️检索(功能强大,可以对Response做检索) 6⃣️展示方式
2)单一请求(调试数据)
3)底部有资源整体情况统计
查看全部 -
Network网络面板
1、查看网页资源请求概览,查看资源分布
2、针对单一请求查看Request/Response或时间消耗等(command+shift+r/contor+shift+r:清除浏览器缓存)
3、分析网页性能优化,使用工具代理页面请求数据等
查看全部 -
使用DevTools作为Text IDE步骤:
1)添加目录
2)代码区修改文件(可修改本地文件)
查看全部
举报