前端代码调试

XIAOMING820

已于 2022-06-28 20:59:38 修改

阅读量301

点赞数

分类专栏：项目与技术栈文章标签： javascript html css

于 2021-10-14 22:16:56 首次发布

本文链接：https://blog.csdn.net/ffhgjgj6576567/article/details/120773936

版权

项目与技术栈专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在前端代码中填入debugger，或者点击行号，（即相当于打断点）
前台执行操作
自动暂停，可一行一行监看代码执行流程
（比一直 console.log 去打印元素方便）

查看页面源代码
检查，
选择一个页面中的元素进行检查

elements：查找元素节点
console：控制台可以执行操作
sources：js代码与调试
network：请求，入参与响应
name:请求名称；status:服务器返回状态码；type:资源类型；initiator:发起者(可跳转js代码)
application：键值对信息，local storage；session storage；cookie；

前端Chrome浏览器调试总结
https://blog.csdn.net/weixin_42357192/article/details/119860018?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_ecpm_v1~rank_aggregation-9-119860018.pc_agg_rank_aggregation&utm_term=%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87Chrome%E5%BF%AB%E9%80%9F%E5%AE%9A%E4%BD%8D%E5%88%B0%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81&spm=1000.2123.3001.4430

如何在chrome浏览器里面debug调试前端代码？
https://blog.csdn.net/weixin_45157527/article/details/119214561?utm_term=%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87Chrome%E5%BF%AB%E9%80%9F%E5%AE%9A%E4%BD%8D%E5%88%B0%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_allsobaiduweb~default-4-119214561&spm=3001.4430

网络，资源，搜索，查找js文件

前端元素定位：检查 - 右键 - copy - JS path
在这里插入图片描述