Web开发

注册

 

发新话题 回复该主题

Web端测试F12的代码调试与抓包 [复制链接]

1#

最近很多同学问我浏览器的F12是什么东东?是干什么用的?为了解决大家的疑问,我特意写了这篇文章,总结了F12的使用。

下面的讲解,主要是以MicrosoftEdge浏览器和极速浏览器中的截图为例。(说明:下面的截图中,中文截图的是MicrosoftEdge浏览器的截图,英文的是极速浏览器的截图。)

我推荐大家用极速浏览器,它抓包比较好比较全面(和浏览器不一样哦);如果莫英文不好,那就用MicrosoftEdge或者其他浏览器。

F12:可打开浏览器的开发者工具,里面主要是web页面的源码、请求数据和响应数据。

打开方式:打开浏览器,然后按快捷键F12或者FN+F12,就可以打开“开发人员工具“。

下图中,是浏览器的开发者工具的主要标签/作用(中文):

下图中,标签的中英文对照图片:

下面逐个解释下每个标签的含义

1.元素(Elements)

我们在做web端测试的时候,Elements这个标签中的内容

分享 转发
TOP
发新话题 回复该主题