f12获取网页文本_F12 - 开发者工具详解
发布日期:2022-02-04 03:25:59 浏览次数:6 分类:技术文章

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

学习使用浏览器自带的 F12 网页开发者工具,可以帮助前端以及测试人员来快速定位调试分析问题、解决问题。

一、如何调出开发者工具

在浏览器页面上F12键 (笔记本电脑 Fn + F12)

右键选择 检查(N)

快捷键 Ctrl + Shift + i

二、开发者工具初步介绍

开发者工具最常用的四个功能模块:

元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。

1、元素(Elements)查看网页页面的所有元素,修改元素的代码与属性。用于查看修改元素的属性、CSS属性、监听事件以及断点等等。

查看元素的代码

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

查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。

修改元素的代码与属性

点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。

注意:

这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。

给元素添加断点

在元素的右键菜单中选择断点选项(Break on…),选中之后,当元素被修改(通常是被JS代码修改)时,页面加载会暂停,然后可以查看该元素的属性。元素断点添加之后,可以在右侧栏的DOM Breakpoints页面中看到,这个页面可以看到当前网页的所有元素断点。

查看元素的监听事件

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

2、Console(控制台)

查看JS对象的及其属性

执行JS语句

查看控制台日志

当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉

在测试界面时,如果出现Bug问题,一般情况下会在这栏展示,查看调试日志信息或者异常错误信息,然后前端开发工程师根据具体问题来调试,进行解决问题。

3、Sources(源代码)

查看源文件

在源代码(Source)页面可以查看到当前网页的所有源文件 包括:样式、css、图片、js文件等。在左侧栏中可以看到源文件以树结构进行展示。

添加断点

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

中断调试

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

也可以在右边的侧栏上查看:

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

4、Network(网络)

三、F12的妙用

1、复制不可复制的文字

有些文章设置了不可复制,那么如果想复制文字时,

按下F12,或者右击鼠标选择【审查元素】,点一下下边弹出框左上角鼠标,然后去点击页面你想要的文字,下面框代码中亮的部分,看不到文字就点击箭头展开,看到文字,双击或者右键copy

2、下载不能保存的图片

例子(比如说某库网需要vip才能下载的图片)

首先我们打开不能直接下载图片的网站,然后使用快捷键F12,或者右击鼠标选择【审查元素】-> 看到对应的img 选择src右键点击open in new web

或者选择【 network】,再选择【 Img】,刷新页面就看得到下面有图片资源了,大部分网页是这样结构,有些图片会在【 sources】那里打开左侧栏(请求回来的图片资源),总之能找到图片的资源所在位置就可以了。

3、截取整个网页

使用浏览器自带的截屏功能截取超过一个屏幕的网页

F12 或 Ctrl+ Shift+ I 打开开发者工具,在任意 tab上按 Ctrl+ Shift+ P,在弹出的输入框里输入 Capture full size screenshot(其实不需要输入完整,可以自动补全),然后按回车即可

4、编辑页面上的任何文本

在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。

四、参考资料

转载地址:https://blog.csdn.net/weixin_39626369/article/details/111547534 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:webview 输入法_android webview 输入法键盘遮挡输入框的问题
下一篇:网站互点工具_网站优化排名做不上需要做的操作

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月11日 14时08分29秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php substr cnblog,php中substr用法示例 2021-06-24
php链接怎么截取,PHP 截取网页中的固定种子链接 2021-06-24
iis运行不起来php报500,解决IIS上安装thinkphp6运行报500错误 2021-06-24
php ajax上传图片过大500错误,javascript – JQuery AJAX文件上传错误500 2021-06-24
matlab 图中的legend,matlab中legend加图示命令的使用 2021-06-24
PHP exec xargs 不执行,Linux中的xargs命令及示例 2021-06-24
php 枚举cookie内容,php设置和获取cookie 2021-06-24
单防区扩展模块怎么用_AB罗克韦尔自动化Micro800 扩展 I/O模块型号及功能介绍 2021-06-24
java矩阵类_Java泛型——泛型矩阵类 2021-06-24
java车牌正则表达式_车牌正则表达式 2021-06-24
wordpress4.9.4 mysql_WordPress 将不再支持 PHP4 和 MySQL 4 2021-06-24
安卓是用java语言写的吗_android开发是用java语言吗? 2021-06-24
java 符号 t_java – 运算符”不能应用于’T’,’T’表示有界泛型类型 2021-06-24
用matlab写出信源熵,计算离散信源的熵matlab实现 2021-06-24
php表单yii2,Yii2创建表单(ActiveForm)方法详解 2021-06-24
php 程序授权机制,授权认证详细说明 2021-06-24
java 命令提示符,如何使用Java打开命令提示符并插入命令? 2021-06-24
IP/tzgm.php,LianjiaSpider/在售数量.ipynb at master · BerSerK/LianjiaSpider · GitHub 2019-04-21
linux移动文件的脚本,使用Linux脚本移动文件 2019-04-21
linux查看系统所有变量,Linux系统各指标命令 2019-04-21