博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JS学习】-利用谷歌浏览器调试JS代码(转)
阅读量:6180 次
发布时间:2019-06-21

本文共 611 字,大约阅读时间需要 2 分钟。

谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作。

首先,打开谷歌浏览器,按快捷键F12或者ctrl+shift+j,就可以打开谷歌浏览器的开发者工具。打开后页面如下所示,下图是打开wap端百度的页面。

下面介绍一下开发者工具中常用的几个功能。左上角第二个选项,是用来切换手机页面的。如果我们访问的网址是手机端wap页面,则点击此按钮,就可以模拟手机进行访问了。

Network是网络工具,可以查看请求数据的状态,类型,大小,时间等,如下图。Network是在调试中常用的工具,可以查看发送的请求是否正确,返回的数据是否正常等。

Sources可以用来查看页面的源文件,包括JS文件和Html文件。找到想要调试的JS代码,在代码前单击,即可设置断点。当运行JS代码时,会自动进入到断点执行。同Java调试类似,JS调试也可以单步运行、进入函数体内调试、直接运行到下一断点等。

如上图所示,右上角4个断点,分别是直接运行到下一断点、单步运行、进入函数体内运行、返回函数执行结果。对应的快捷键分别是F8、F10、F11和shift+F11。在调试时,把鼠标放在某个变量上,就可以查看该变量的运行值。

Resources可以用来查看一些存储数据,比较常用的是本地缓存Local Storage、Session缓存Session Storage和Cookies。如下图所示:

你可能感兴趣的文章
阿里云向物流业渗透 货运司机受益
查看>>
灾难恢复的人为因素:经理们应该做的10件事情
查看>>
中国教育行业可能到了最不平凡的10年:要么创新,要么死亡
查看>>
学习Docker的User Namespace
查看>>
Symantec Backup Exec 2012 Agent for Linux 卸载
查看>>
用EJB进行事务管理
查看>>
Linux Shell脚本系列之一
查看>>
数据可视化,个人经验总结(Echarts相关)
查看>>
Mysql MAC installation
查看>>
一款基于Vue和Go的桌面端管理star项目应用
查看>>
使用shell创建一个简单的菜单bash select用法
查看>>
Nuxt之默认模版和默认布局
查看>>
Vue模板、JS、CSS分离实现
查看>>
Hexo -- 快速、简洁且高效的博客框架 入门
查看>>
JVM
查看>>
高并发面试总结
查看>>
Pycharm--Python文件开头自动添加utf-8编码
查看>>
Leetcode PHP题解--D60 824. Goat Latin
查看>>
2019年一线大厂春招:Spring面试题和答案合集(上篇)
查看>>
尚未弄懂的JS系列(未完待续)
查看>>