chrom浏览器-F2使用方法一

由于F12是前端开发人员的利器，所以我自己也在不断摸索中，查看一些博客和资料后，自己总结了一下来帮助自己理解和记忆，也希望能帮到有需要的小伙伴，嘿嘿！

首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。

元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。
1、元素（Elements）

查看元素代码：点及如图箭头（或用者用快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

查看元素属性：可从被定位的源码中查看部分，如class、src，也可在右边的侧栏中查看全部的属性，如下图位置查看

修改元素的代码与属性：可直接双击想要修改的部分，然后就进行修改，或者选中要修改部分后点击右键进行修改，如下图

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

右边的侧栏个功能的介绍:如下图所示

2、控制台（Console）

查看JS对象的及其属性

执行JS语句
查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉。
3、源代码（Sources）其主要功能如下介绍

4、网络（Network）大体功能如下：

请求文件具体说明

一共分为四个模块：

Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview：预览面板，用于资源的预览。
Response：响应信息面板包含资源还未进行格式处理的内容
Timing：资源请求的详细信息花费时间
---------------------
作者：Self_Growing
来源：CSDN
原文：https://blog.csdn.net/m0_37724356/article/details/79884006
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/jingdenghuakai/p/10917627.html

chrom浏览器-F2使用方法一相关推荐

简单实用的Chrom浏览器模拟POST请求方式
实现post请求方式有很多种,比如postman等. 但有时候接口做了登录拦截,这个时候使用postman等工具要配置相关的cookie信息. 这个过程是很繁琐,最后也不一定能达到预期效果. 本篇使用 ...
php网站禁止右键,JavaScript_javascript实现禁止复制网页内容汇总，方法一：// 禁用右键菜单 - phpStudy...
javascript实现禁止复制网页内容汇总方法一: // 禁用右键菜单.复制.选择 $(document).bind("contextmenu copy selectstart" ...
linux如何查看入口地址,宝塔Linux面板安全入口地址忘了（方法一）
宝塔Linux面板安全入口地址忘了(方法一),面板,地址,入口,宝塔,所示宝塔Linux面板安全入口地址忘了(方法一) 易采站长站,站长之家为您整理了宝塔Linux面板安全入口地址忘了(方法一)的相 ...
导出oracle sequences,CSS_oracle导出序列方法分析，方法一:SELECT ' CREATE SEQUEN - phpStudy...
oracle导出序列方法分析方法一: SELECT ' CREATE SEQUENCE '||SEQUENCE_NAME|| ' INCREMENT BY '|| INCREMENT_BY ||' ...
JBOSS通过Apache负载均衡方法一：使用mod_jk
JBOSS通过Apache负载均衡方法一:使用mod_jk 本文第一.二节分别对Linux环境下前端使用Apache以及windows环境下前端使用IIS通过AJP协议和后端的JBOSS通信实现负 ...
分析:windows下cmd默认的编码是ASCII编码 ,windows的中文环境下编码是GBK 方法一:在保存输出流保存的时候做一个对文字GBK编码,在输出到文件如下 [python] view
分析:windows下cmd默认的编码是ASCII编码 ,windows的中文环境下编码是GBK 方法一:在保存输出流保存的时候做一个对文字GBK编码,在输出到文件如下 [python] view ...
php excel header,【IT专家】PHP生成excel,方法一-header生成
本文由我司收集整编,推荐下载,如有疑问,请与我司联系 PHP生成excel,方法一:header生成 2018/02/09 444 public function export_order() { / ...
P2386 放苹果方法一
http://noi.openjudge.cn/ch0203/666/ /* 2.3基本算法之递归变递推_666放苹果方法一 http://noi.openjudge.cn/ch0203/666/1 ...
NOIP2016 复赛普及组第 1 题买铅笔方法一
/* NOIP2016 复赛普及组第 1 题买铅笔方法一 P1909 买铅笔 https://www.luogu.org/problem/P1909 */ #include<cstdio& ...

chrom浏览器-F2使用方法一

chrom浏览器-F2使用方法一相关推荐

最新文章

热门文章