chrome工具调试
项目调试的困境
程序开发总会遇到各种各样的问题,为什么实际结果和预期结果不一致?
这个时候如果能深入程序内部抽丝剥茧去一探究竟再好不过!
而chrome工具是前端开发的杀手锏,经常听到的一句话是:
出问题了?F12看看...
前端调试的手法一般就两种:
- 服务端(添加调试代码)
- 客户端(开发者工具)
对于简单的页面来说,都能很快的找到问题所在
面对大型的网站项目(react、vue),页面成千上万的组合嵌套。
很多页面很多相似的按钮,当我们接受一份项目代码,如何快速的定位bug所在页面?
如果从项目结构上层层递进,不仅项目时间不允许,而且容易陷入代码的海洋!
如果从页面断点入手,现在的前后端分离项目,代码经过编译,面对一串编译压缩后的字串,如同天书!
怎么办?客户和领导就在身后,问题解决完才能下班?怎么能早点回家吃口热饭?
chrome调试工具常用功能介绍
一、Elements(元素)
- Styles(样式)
- 说明:选中元素的自身样式、继承样式等,可以手动修改进行调试
- 场景:手动修改选中元素样式、选中元素添加断点调试
实战1.1 修改元素样式
实战1.2 排查样式来源
实战1.3 查看元素事件
二、Console(控制台)
- 说明:进行简单的变量输出调试、服务端添加输出信息等
- 场景:debug过程种的变量输出查看、服务端调试信息输出
三、Source
- 说明:网站的源代码,包含html、css、js、debug
- 场景:源码断点调试、dom断点、事件断点
实战3.1 添加代码断点
断点添加方式
- Elements选中元素,右键添加dom事件
- debug面板,添加鼠标、键盘等事件(见下图)
实战3.2 断点调试
技巧1:添加鼠标、键盘事件后,调用堆栈首先看到的框架源码,怎么快速进入自己的源码?
- 忽略框架代码,这样就可以进到自己编写的事件处理方法里边
技巧2:大型项目,如何快速拦截包含某种关键字的api,以快速定位代码位置?
- 在XHR/fetch Breakpoint里添加/api/test关键字匹配串,这样就会拦截所有包含该关键字的api请求
实战3.3 tooltip鼠标移开就没了,如何调试?
四、Network
- 说明:网站发起的所有远程请求信息详情
- 场景:请求信息详情(header、param、body等信息)
技巧1:大型项目,某一个请求报错,如何快速定位请求的源码js位置?
- 查看initiator面板的请求堆栈信息,找到对应的源码发起位置
五、Application
- 说明:cookie、session、localStorge等存储数据的位置
- 场景:查看cookie的失效时间、编辑localStorge存储的键值对
其它的页签不常用,在本文不做介绍。
chrome工具调试的更多相关文章
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- WebView 与PC机Chrome配合调试
参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Bro ...
- chrome断点调试
chrome断点调试 在编写JavaScript代码时,如果出现了bug,就要不断的去找错误,如果console控制台中提示还好说,可是没有提示恐怕就要费一番周折了.但是有了chrome这个浏览器,我 ...
- 在 Chrome 中调试 Android 浏览器
最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Devel ...
- Google Chrome浏览器调试入门————转载只为自己查看方便
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...
- Chrome 实用调试技巧
Chrome 实用调试技巧 2016-07-23 如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工 ...
- 使用 桌面的 chrome 远程调试 Android 的页面
手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌 ...
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
随机推荐
- linux之间上传下载--SCP
1.远程拷贝文件 [root@rhel8-client01 yum.repos.d]# scp root@192.168.72.149:/etc/yum.repos.d/* . (.表示拷贝到当前文件 ...
- P4035 [JSOI2008]球形空间产生器 (向量,高斯消元)
题面 有一个 n n n 维球,给定 n + 1 n+1 n+1 个在球面上的点,求球心坐标. n ≤ 10 n\leq 10 n≤10 . 题解 好久以前的题了,昨天首 A . n n n 太小了! ...
- 「CCO 2017」专业网络
Kevin 正在一个社区中开发他的专业网络.不幸的是,他是个外地人,还不认识社区中的任何人.但是他可以与 N 个人建立朋友关系 . 然而,社区里没几个人想与一个外地人交朋友.Kevin 想交朋友的 N ...
- windows绕过杀软添加账户密码
windows绕过杀软添加账户密码 起因:system权限下存在杀软无法添加账户信息 绕过方法 1.C#脚本 运行后会在目标机器上创建一个用户为 wh4am1 密码为 qqai@love 的 Admi ...
- npm 和 maven 使用 Nexus3 私服 | 前后端一起学
前文<Docker 搭建 Nexus3 私服 >介绍了在 docker 环境下安装 nexus3 以及 nexus3 的基本操作和管理,本文分别介绍 npm(前端)和 maven(后端)如 ...
- Linux虚拟机启动报错挂载点丢失
fstab 挂载失败 实验准备 1) 准备:vim /etc/fstab /mnt1/cdrom 挂载点不在 2) 系统启动报错截图 修复步骤 /etc/fstab 中的错误和损坏的文件系统可能会阻止 ...
- 强扩展、强一致、高可用…GaussDB成为游戏行业的心头爱
摘要:看GaussDB for Redis强扩展.高可用.强一致.高安全,如何玩转各大游戏场景 本文分享自华为云社区<GaussDB为什么成为游戏行业的心头爱?>,作者: GaussDB ...
- kafka的auto.offset.reset详解与测试
1. 取值及定义 auto.offset.reset有以下三个可选值: latest (默认) earliest none 三者均有共同定义: 对于同一个消费者组,若已有提交的offset,则从提交的 ...
- 安装vm,在vm中安装windows10操作系统。
步骤:双击打开虚拟机文件 根据向导安装 下一步 然后等待安装 安装好了后点击许可证 ZF3R0-FHED2-M80TY-8QYGC-NPKYF YF390-0HF8P-M81RQ-2DXQE-M2U ...
- ES 7.13版本设置索引模板和索引生命周期管理
第一步:索引管理中查看都有哪些索引文件,然后添加索引模式(后面的日期用*表示) 第二步:索引生命周期管理 自带的有一个log,就使用这个,不用再新建了,根据需求修改里面的配置就行了 第三步:添加索引模 ...