Chrome开发者工具 debug 调试
Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为:
- Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
- Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。
- Source 标签页:用于查看和调试当前页面所加载的脚本的源文件。
- TimeLine 标签页: 用于查看脚本的执行时间、页面元素渲染时间等信息。
- Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。
- Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。
- Audits 标签页:用于优化前端页面,加速网页加载速度等。
- Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。
代码格式化
一般情况下上线前 js 文件在都会压缩一下, 压缩的 javascript无法设定断点. 在 Sourse 面板下面打开一个压缩的js文件,会有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化, 方便设断点。
查看元素绑定事件
在 Elements 面板, 选中一个元素, 然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件, 也就是在事件捕获和冒泡阶段会经过的这个节点的事件.
ajax中断
在 Sourse 面板右侧有个 XHR Breakpoints, 点右侧的 + 会添加一个 xhr 断点, 断点是根据 xhr 的 url 匹配中断的, 如果不写匹配规则会在所有 ajax, 这个匹配只是简单的字符串查找, 发送前中断, 在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求
JavaScript异常中断
在 Chrome 开发者工具中,可以开启运行时错误自动暂停这一功能,从而使开发者工具能在发现运行时脚本异常时,在异常脚本处暂停运行,跳转至调试页面。
自动暂停按钮的下方有一个选项,Pause On Caught Exceptions,如果勾选上,则即使所发生运行时异常的代码在 try/catch 范围内,Chrome 开发者工具也能够在错误代码处停住。
在js文件中搜索或查找js函数
- 在 chrome developer tool 打开的情况下, 按 ctrl + shift + F, 在通过 js 钩子查找代码位置时很有用, 查找可以支持正则表达式
- 查找函数定义: ctrl + shift + 0 (在 Sources panel 下)
- 查找文件: ctrl + o (在 Sources panel 下)
- 更多快捷键: 在 chrome developer tool 中按 ? 查看帮助
command line api
两种类型的命令行:
1. 单行模式。单行模式是chrome的默认命令行模式,它允许我们一次输入一行代码。单行模式的优点是支持自动完成。
这个很强大的,就像在终端中一样,你还可以使用上下键来调入最近使用过的命令。
2. 多行模式。多行模式是单行模式的加强版,它允许我们一次输入多行代码并且马上执行。
例子:
- console.group()和console.groupEnd() 分组显示
- console.dir()可以显示一个对象所有的属性和方法
- console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。
- console.trace()用来追踪函数的调用轨迹。
- console.time()和console.timeEnd(),用来显示代码的运行时间。
更多可参考:
https://blog.csdn.net/xueer767/article/details/65936204?fps=1&locationNum=8
Chrome开发者工具 debug 调试的更多相关文章
- Chrome开发者工具Debug入门
译者按: 手把手教你摆脱console.log,掌握高级的debug方法. 原文: Learn How To Debug JavaScript with Chrome DevTools 译者: Fun ...
- 【译】在 Chrome 开发者工具中调试 node.js
原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...
- 使用Chrome开发者工具远程调试原生Android上的H5页面
Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容.具体步骤如下: (1)设置Webview调试模式 可以在Ac ...
- 在 Chrome 开发者工具中调试 node.js
命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...
- Chrome 开发者工具断点调试(视频教程)
很多人不了解 Chrome Dev Tools (开发者工具)的使用方法和技巧. 其中很多技能,无论是前端开发从业者,还是普通用户,了解一些还是对日常很有帮助的. 本猿定期录制.甚至根据您的需求来订制 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
- Chrome开发者工具调试详解
chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Console).源代码(Sources),网络(Network). 元素(Elements):用于查看或修改HTML元素 ...
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
随机推荐
- LeetCode(125)题解--Valid Palindrome
https://leetcode.com/problems/valid-palindrome/ 题目: Given a string, determine if it is a palindrome, ...
- javaweb开发之EL表达式
一.EL简介 EL全名为Expression Language,它主要用于替换JSP页面中的脚本表达式<%= %>,从各种类型的Web域中检索Java对象.获取数据.它可以很方便地访问Ja ...
- 杭电 2553 N皇后问题
http://acm.hdu.edu.cn/showproblem.php?pid=2553 N皇后问题 Time Limit: 2000/1000 MS (Java/Others) Memor ...
- HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
- SE18 BADI定义 / SE19 BADI 实现
明天花30分 再研究下这个: 如果你知道一个BADI名称,可以: 1)使用SE18,输入该BADI名称后,选择Interface,然后查看对应的接口实施样例代码(Example implementat ...
- 20170301 Excel 分多个sheet 导出
要么上传个EXCEL模板 里面已经有规定好的SHEET页了 要么直接打开个EXCEL 代码里ADDsheet页来做 就是这么点区别 [园工]CD-ABAP-win<allenjj ...
- MongoDB学习笔记(1):MongoDB的安装和说明
MongoDB学习笔记(1):MongoDB的安装和说明 快速开始 下载地址 官网下载: https://www.mongodb.com/download-center?jmp=nav#communi ...
- 转载——Android permission 访问权限大全
程序执行需要读取到安全敏感项必需在androidmanifest.xml中声明相关权限请求, 完整列表如下: Android.permission.ACCESS_CHECKIN_PROPERTIES ...
- sdut oj 3058 路线冲突问题(BFS+记录路径算法,回溯路径 )
路线冲突问题 题目描述 给出一张地图,地图上有n个点,任意两点之间有且仅有一条路.点的编号从1到n. 现在兵团A要从s1到e1,兵团B要从s2到e2,问两条路线是否会有交点,若有则输出交点个数,否出输 ...
- Consul环境搭建
大家在玩的时候 一定要使用ningx 1.9以上版本啊! 下载:wget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_ ...