精华内容
下载资源
问答
  • Chrome浏览器F12开发者工具简单使用1、如何调出开发者工具开发者工具初步介绍2、元素(Elements)3、控制台(Console)4、源代码(Source)网络(Network)Network详细介绍Network主题内容介绍请求文件具体说明细节...

    1、如何调出开发者工具

    • 按F12调出
    • 右键检查(或快捷键Ctrl + Shift + i)调出
      在这里插入图片描述

    开发者工具初步介绍

    在这里插入图片描述

    chrome开发者工具最常用的四个功能模块:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。

    • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改,即时显示。大大方便了开发者调试页面。
    • 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。还可以当作Javascript
      API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行。
    • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
    • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。

    2、元素(Elements)

    • 查看元素的代码:点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。

    • 查看元素的属性:定位到元素的源代码之后,可以从源代码中读出该元素的属性。如下图中的class、src、width等属性的值。
      在这里插入图片描述

    • 当然从源代码中读到的只是一部分显式声明的属性,要查看该元素的所有属性,可以在右边的侧栏中查看:
      在这里插入图片描述

    • 修改元素的代码与属性:点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as
      HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as
      HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
      在这里插入图片描述

    • 查看元素的CSS属性:在元素的右边栏中的styles页面可以查看该元素的CSS属性,这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件,使编码调试时修改代码变得非常方便。
      在这里插入图片描述

    • 在Styles页旁边,有一个Computed页面,这个页面展示该元素经过计算之后的所有CSS属性,即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行,是浏览器渲染页面的一个必不可少的过程。
      在这里插入图片描述

    • 修改元素的CSS属性:在元素的Styles页面,可以对元素的CSS属性进行修改,甚至删除原有、添加新属性。不过,这些修改,仅对当前浏览器的页面展示生效,不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。

    • 给元素添加断点:在元素的右键菜单中选择断点选项(Break
      on…),选中之后,当元素被修改(通常是被JS代码修改)时,页面加载会暂停,然后可以查看该元素的属性。
      在这里插入图片描述

    • 元素断点添加之后,可以在右侧栏的DOM Breakpoints页面中看到,这个页面可以看到当前网页的所有元素断点。
      在这里插入图片描述

    • 查看元素的监听事件:元素的右边栏的Event
      Listener页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数),大大提高开发维护的效率。
      在这里插入图片描述

    3、控制台(Console)

    • 查看JS对象的及其属性:
      在这里插入图片描述
    • 执行JS语句:
      在这里插入图片描述
    • 查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉

    4、源代码(Source)

    • 查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
      在这里插入图片描述

    • 添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit
      breakpoint可以给该断的添加中断条件。
      在这里插入图片描述

    • 中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的。

    • 也可以在右边的侧栏上查看:
      在这里插入图片描述

    • 在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。
      在这里插入图片描述

    网络(Network)

    Network详细介绍

    在这里插入图片描述
    那我就按照从左到右的顺序来写啦~

    • 记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
    • 清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)
    • 捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。
      在这里插入图片描述
    • 过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。
      在这里插入图片描述
      也可以是一些指定条件
      指定条件有哪些?

    domain:资源所在的域,即url中的域名部分。如 domain:api.github.com

    has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin

    is:当前时间点在执行的请求。当前可用值:running

    larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

    method:使用何种HTTP请求方式。如 GET

    mime-type:也写作content-type,是资源类型的标识符。如 text/html

    scheme:协议规定。如 HTTPS

    set-cookie-name:服务器设置的cookies名称

    set-cookie-value:服务器设置的cookies的值

    set-cookie-domain:服务器设置的cookies的域

    status-code:HTTP响应头的状态码

    • 显示详细信息
      在这里插入图片描述
      在这里插入图片描述

    • 显示时间流
      在这里插入图片描述
      能够根据时间,查看对应时间下 浏览器请求的资源信息

    • Preserve log :是否保留日志
      当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空的哟~

    • Disable cache :是否进行缓存
      当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。

    • Offline :设置模拟限速,如下图所示。
      在这里插入图片描述
      设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

    Network主题内容介绍

    在这里插入图片描述
    下列介绍中,前者为名词解释,后者为举例

    • Name/Pat:资源名称以及URL路径 (main.css)
    • Method:Http请求方法 (GET或者POST)
    • status/Text:Http状态码/文字解释 (200,ok)
    • Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions
      (html,css,js等)
    • Initiator:解释请求是怎么发起的,有四种可能的值
      1.Parser :请求是由页面的html解析时发送
      2.Redirect:请求是由页面重定向发送
      3.script :请求是由script脚本处理发送
      4.other :请求是由其他过程发送的,比如页面里的Link链接点击
    • size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

    请求文件具体说明

    点击某个具体请求后的界面,如下图所示:

    在这里插入图片描述
    一共分为四个模块:

    • Headers
      在这里插入图片描述
      Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。
    • Preview:预览面板,用于资源的预览。
      在这里插入图片描述
    • Response:响应信息面板包含资源还未进行格式处理的内容
      在这里插入图片描述
    • Timing:资源请求的详细信息花费时间
      在这里插入图片描述

    细节补充

    对某请求右键,出现页面如下图所示。

    在这里插入图片描述

    • Copy Request Headers:复制HTTP请求头到系统剪贴板

    • Copy Response Headers:复制HTTP响应头到系统剪贴板

    • Copy Response:复制HTTP响应内容到系统剪贴板

    • Copy as
      cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库,用于配合url语法进行数据传输)

    • Copy All as HAR:将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

    • Save as HAR with Content:将资源的所有的网络信息保存到HAR文件中(.har文件)

    • Clear Browser Cache:清除浏览器缓存

    • Clear Browser Cookies:清除浏览器cookies

    • Open in Sources Panel:当前选中资源在Sources面板打开

    • Open Link in New Tab:在新tab打开资源链接

    • Copy Link Address:复制资源url到系统剪贴板

    若将所有的网络信息保存到HAR文件中,点击这里,可上传查看
    在这里插入图片描述

    链接转自:

    https://www.cnblogs.com/yaoyaojing/p/9530728.html

    展开全文
  • 浅谈F12开发者工具、Fiddler与Wireshark

    千次阅读 2019-10-19 17:04:13
    浅谈 F12开发者工具、Fiddler 与 Wireshark 事实上,第一次接触爬虫的时候,首先当然会疑惑什么是爬虫,然后就会有教程教你一步步爬取所需要的内容。当然,其中必然少不了一些工具的辅助。上述的我提到的 3 个工具,...

    浅谈 F12开发者工具、Fiddler 与 Wireshark

    事实上,第一次接触爬虫的时候,首先当然会疑惑什么是爬虫,然后就会有教程教你一步步爬取所需要的内容。当然,其中必然少不了一些工具的辅助。上述的我提到的 3 个工具,都是我看别人写的文章,所使用的工具。像之前的我一样的小萌新,当然会懵逼,一会 F12 ,一会又Fidder 抓包,等等抓包是什么意思,Wireshark 抓的都是什么啊,我怎么什么都看不懂,一下子刷过去这么多条。
    不过,再多次使用过程中,也逐渐有了一些自己的想法,当然这些工具的高级用法我也不会用,这里就随便写写我对这些工具的看法把。

    各个工具使用心得

    以下就简单讲几句,这些工具也不是几句就能说明白的。

    1. F12 开发人员工具
      ① 事实上,在我还小的时候,当时我就意外点击了 F12,出现了天书一般的文字,当时就惊呆了,这些都是什么。后来,接触过 F12 的锁定元素的功能,那时候的我可真的是什么都不懂。刚接触 B 站,弹幕里有人刷取封面的事。B站的视频封面可没办法直接右键保存下来,上百度搜索得知,需要 F12 帮助,那时候是我又一次接触 F12的时候,当时的感觉。哇~!好神奇。
      ② F12 开发人员工具,我觉得顾名思义,开发人员用的。用来测试网站开发的吧(我估计),也有些网站直接禁止 F12,估计不许测试他的网站。emmm… F12 抓包是可行的,因为 F12 是浏览器的功能。各式各样的文件(事实上也可以叫做数据包)传送给浏览器,F12 就可以直接看到这一个个的文件,从而就可以达到抓包的效果【不偷不抢,对方免费送过来的,难道还不能接受么】。
      ③ F12 比较有用的功能,我认为是锁定元素(非常方便)、Network(最常用,看数据包)、Console(还用不来)。

    2. Fiddler
      ① Fidder 第一次遇到,我也忘记,好像是一篇爬取B站视频的博文,有些部分写的我看不懂,出现了一款我不懂的软件 Fidder,反正说是很牛逼。(⊙o⊙)… 确实 emmm
      ② 相当于中间人【介于浏览器和服务器之间的角色】,将数据包截取下来。
      ③ Fidder 的强大在于,专门为 Http/Https 协议定制的软件,主要为了抓取这两个协议的数据包。整体界面比较分隔的开一些,不像 F12 因为空间问题,很多东西挤在一起,不是所有的文件都支持显示,或者格式化,导致需要额外的网站或者其它地方做这一步。Fidder 的话,可能是为了测试使用,也是测试网站。我觉得吧,如果 F12 是面向用户的测试,那么 Fidder 面向开发人员的测试,更加显得专业一些吧。而且,Fidder支持更改请求头等,F12 好像不支持这一些。

    3. Wireshark
      ① Wireshark 一个软件 —— 我刚进入,完全是一脸懵逼的东西,那时候并没有计算机网络的概念中,源地址,目的地址,一串串数字看的我懵了。也是我最后学习的软件,因为有一段时间内,这个软件对我没有用,因为基本上能抓取的都是 http 协议,而不是其他协议
      ② Wireshark 也非常强大。因为,它每个数据包就是一个完整的帧。这在计算机网络中就是数据链路层的东西。厉害。而且它还有杂收模式,获取其它流经网卡的帧。
      ③ Wireshark 可以抓取其它协议的数据包,这就是它的强大,而且对于懂得人来说,它显示的信息非常完整和整洁。关于Wireshark 也就评论这么多,说的多反而显示我的无知。

    如何挑选适合的工具呢?

    ① 如果这是为了分析浏览器页面,而并不需要进行更进一步的测试或更详细的数据包信息,用 F12 足够。
    ② 当然 Fidder 用的习惯的人,用这个抓也行
    ③ Fiddler 可以抓取手机端的 http 包,浏览器不行。因为浏览器是客户端,手机应用也是客户端是平行的东西。
    ④ 模拟测试网站,可以使用 Fiddler ,用于发现bug
    ⑤ 抓非 http 协议,用 Wireshark
    ⑥ WebSocket,F12 和 Fiddler 都挺方便的
    ⑦ 事实上,都是看个人喜好的

    结束语

    就先写这么多吧~!
    ─=≡Σ(((つ•̀ω•́)つ

    点我回顶部

     
     
     
     
     
     
     
    Fin.

    展开全文
  • 下面是新款微软Edge浏览器...按F12键,打开Microsoft Edge开发者工具,点击设置 然后选择Match browser language(匹配浏览器语言) 然后就会看到你的界面已经变成中文,如下 如果想切回英文,同样操作即可 ...

    按F12键,打开Microsoft Edge开发者工具,点击设置

    在这里插入图片描述

    然后选择Match browser language(匹配浏览器语言)

    在这里插入图片描述

    然后就会看到你的界面已经变成中文,如下

    在这里插入图片描述

    如果想切回英文,同样操作即可

    在这里插入图片描述

    展开全文
  • 1 F12打开开发者工具 2 3 4

    1 F12打开开发者工具
    在这里插入图片描述

    2
    在这里插入图片描述
    3
    在这里插入图片描述
    4
    在这里插入图片描述

    展开全文
  • 《浏览器F12开发者工具的妙用》

    千次阅读 2020-03-05 15:19:15
    浏览器的有趣玩法 前端相关小技巧 ^-^ 下面的几种用法本人都——试过,还是挺有意思的...我们按下F12,或者右击鼠标选择【审查元素】,点一下下边弹出框左上角鼠标,然后去点击页面你想要的文字,下面框代码中亮的...
  • 手机网页F12开发者工具eruda

    千次阅读 2020-01-07 15:34:58
    点右下角的图标可以出来工具 console.log('捕获不到这句话'); <script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init(); console.log('你可以看到这句话');  
  • *.极简体验(默认仅4个操作) *.分为本地外壳与云端功能(包极小、易扩展) *.全屏的线性的窗口控制模式 *.支持[扩展插件] *.支持[广告过滤](可自定义) *....版本:0.4.2.64 系统:Android 4.0.3以上 ...*....*....*....
  • 如何使用浏览器的F12开发者工具调试页面?

    万次阅读 多人点赞 2018-05-27 22:25:23
    通常前端程序员在按照UI效果图编辑网页时,不可能一口将全部的代码全部写好,通常情况是编写边调,经过反反复复的调试后才能达到要求的效果,这时候用Chrome浏览器的F12开发者工具能形象直观的帮助程序员调试自己的...
  • 浏览器 F12 开发者工具快速入门

    千次阅读 2017-07-05 15:31:49
    浏览器 F12 开发者工具快速入门
  • 你不知道的,F12开发者工具调试技巧

    万次阅读 多人点赞 2019-10-26 09:11:54
    你不知道的,F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择:hov 在下方选择元素的状态即可) 方式二 (在elments中选中节点然后右键选中元素前状态,点击后 节点前就会出现一个橘色小球,然后在右侧就可以...
  • 禁止打开 F12 开发者工具

    千次阅读 2019-09-26 14:58:53
    禁止F12 window.onkeydown = window.onkeyup = window.onkeypress = function (event) { // 判断是否按下F12F12键码为123 if (event.keyCode = 123) { event.preventDefault(); // 阻止默认事件行为 ....
  • 选择页面上元素,右键“检查”,会打开开发者工具窗口,显示当前选择元素的源代码,可以双击进行修改。 如果要修改的东西比较多,可以折叠元素并单击选择,再右键Edit as HTML修改。 2、颜色取色器 选择页面上...
  • ie F12 开发者工具 错误分析 包含大部分使用ie开发的时候 进行F12调试报错的进行相关的错误的分析
  • CSDN卜小娴《Chrome开发者工具使用小技巧》 CSDN csdnligao 《chrome开发者工具的使用》 ...CnBlogs逆天妖精《Chrome浏览器F12开发者工具简单使用》 转载于:https://www.cnblogs.com/hyeTi/p/10337643.html...
  • 太年轻了,下面就介绍一下Chrome自带的developer tool神器(开发者工具),从此让你的chrome开挂!???? 本文主要分为以下几个方面介绍,不管你是不是开发者,都会有所收获: Elements面板:主要介绍如何实时修改...
  • 下面进入正题,作为Web开发者,Web调试工具自然是必不可少的。那么,我们就来聊聊Chrome, Firefox, IE三大家的Web调试的一些特点(虽然市面有数不清的浏览器,但是纠其内核,基本都是这三者之一),以及都有哪些技巧?...
  • F12开发者工具

    2021-11-30 14:31:04
    F12简结,前端开发,测试
  • IE11 F12开发者工具不可用问题

    万次阅读 2016-10-11 16:39:16
    Win7系统安装IE11后,发现F12开发者工具不能够使用,报以下错误: 这是缺少了IE11的累积性更新,需要安装微软的更新补丁,该更新区分32位和64位  Cumulative Security Update for Internet Explorer 11 for ...
  • IE开发人员工具 F12调试工具 就是为前端开发人员开发页面而设计的工具 提供一系列的小工具 让你可以方便的查找 调试页面的BUG 包括HTML代码 CSS代码和JavaScript代码 同时 他也提供了一些虽然比较鸡肋 但是还能...
  • perview的意思是Preview:预览面板,用于资源的预览 Response:响应信息面板包含资源还未进行格式处理的内容 1.一般情况下我们看Network里面的Preview和Response的结果似乎一模一样。 不管是请求页面,请求页面还是...
  • 你不知道的,F12开发者工具调试技巧 1. 调试伪类 (点击styles 选择:hov 在下方选择元素的状态即可) 方式二 (在elments中选中节点然后右键选中元素前状态,点击后 节点前就会出现一个橘色小球,然后在右侧就可以...
  • 开发者工具F12指南

    2021-05-30 13:37:40
    开发者工具F12指南 打开方式 快捷键:shift+ctrl+i或者F12,在页面上右键–》检查,打开开发者工具 各功能简介 1.1. 元素(Elements) 用来查看或修改网页的html元素属性、css属性、监听事件或断点 1.2...
  • 问题:F12开发者工具,IE浏览器的是F12是一个独立窗口的,非常难看和难用!特别是不能调试移动端。我目前用的是QQ浏览器,这几天写一个移动端网站,F12调试时,总会变成IE的模式,没法模拟手机。 二.解决方案 ...
  • chrome F12开发者工具之preview 与response的区别 问题描述: 在Chrome浏览器按F12的时候,我们在调试程序的时候回查看Network里面的Preview和Response的结果,发现没有什么区别? 不管是请求页面,请求页面还是请求js...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,465
精华内容 6,186
关键字:

f12开发者工具