f12获取网页文本_F12 - 开发者工具详解

学习使用浏览器自带的 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选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

注意：

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

f12获取网页文本_F12 - 开发者工具详解相关推荐

Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
[转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
Chrome开发者工具详解（二）
Chrome开发者工具详解 (二) 前言一.Console面板 **定位面页节点** **Css选择器进行节点定位** 事件监听二.查看节点上注册的监听器总结前言 Console面板是与网页进 ...
Chrome开发者工具详解（六）之Timeline面板
Chrome开发者工具详解(3):Timeline面板转载于:https://www.cnblogs.com/kunmomo/p/11201047.html
f12获取网页文本_细说网页开发者工具F12-前端开发利器一
网页开发者工具之 Elements 前言写这篇文章的目的主要是为了帮助前端小白,学习使用浏览器自带的F12网页开发者工具,来快速定位调试分析问题.解决问题.当然这仅是作者的个人学习心得,有不足之处欢 ...
f12获取网页文本_8招教你快速搞定网页内容禁止复制粘贴，想怎么复制就怎么复制...
大家平时在搜索资料.浏览网页时,经常会复制一些内容.尤其是文字比较多时,比起一个个字手打,复制能省下不少功夫. 可有时候好不容易找到资料了,却发现有些网站上的内容文本复制不了?甚至右键菜单都打不开! ...
f12获取网页文本_jmeter获取web页面文本内容的两种方式
介绍两种jmeter获取页面文本的方式,以我的博客主页为例,我想获取标题"风城烟雨"这几个字方式一:使用正则表达式提取器 1.在博客主页空白处鼠标右键查看页面源代码,在源代码中找 ...
chrome F12 谷歌开发者工具详解 Network篇
开发者工具初步介绍 chrome开发者工具最常用的四个功能模块: Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式.css可以即时修改,即使显示.大大方便了开发者调试页 ...
Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板面板上包含了Elements面板.Console面板.Sources面板. ...

f12获取网页文本_F12 - 开发者工具详解

f12获取网页文本_F12 - 开发者工具详解相关推荐

最新文章

热门文章