发现光，欣赏光，学习光

每个人身上都有着不同的闪光点，把焦点凝结在缺点上只会让互相难过。转移焦点，放在他的优点上，你会发现，唔还不错。而且，你还可以学习它，让你变得更棒。（我越来越擅长写鸡汤了？？？？？？？）

我从别人那里偷学的前端小技巧

Elements
Console
Sources
Network
- Headers

首先F12 打开调试窗口
开发者工具，不同电脑可能快捷键不同

Elements

1 Elements可以看最终生成的html
（1）点击界面的任意部分可以选
（2）可以切换界面展示效果

（3）Elements右侧可以修改css效果，并实时的显示在界面上，可以修改好后，再修改本地的css

Console

这里可以看到console.log的输出（这个应该都用过吧~）

Sources

这里可以给页面打断点

Network

这里可以看到你请求的链接

接下来，我点开任意一个链接，详细介绍下

Headers

1 General
（1）Request URL：请求的url
（2）Request Method：请求方法
（3）Status Code：响应的状态
（4）Remote Address：远程地址
（5）Reffer Policy：不知道欸，以后再补充

2 Response Headers
注意一下content-type，有时候后端报错，可能是格式不对呢

3 Response
这里可以看到请求返回的信息，可能是json串，也可能是解析的页面（最接近原代码）

恭喜你看完啦，更详细的以后遇到再补充，也欢迎你评论补充呐~

我从别人那里偷学的前端调试小技巧(浏览器篇)相关推荐

前端html小技巧（form篇）：复选框、单选按钮的使用
今天分享下"前端html小技巧(form篇):复选框.单选按钮的使用"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南 ...
前端html小技巧—input标签详解
今天分享下前端html小技巧-input标签详解 ,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. 定义和用法 inp ...
前端微信小程序实战篇
电商底部导航栏的制作我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
Excel表格的函数和必学的五个小技巧
Excel是我们在日常办公和学习中最长用到的办公软件,对于Excel很多小伙伴可能也只是了解简单的一些使用方法,今天跟大家来分享下在工作中我们常用的函数技巧和Excel表格的五个干货小技巧,一起来学习 ...
前端面试知识点大全——浏览器篇
总纲:前端面试知识点大全目录 1.浏览器工作原理 2.浏览器如何解析css,如何渲染css的 2.1 构建DOM树 2.2 构建CSSOM规则树(就是css规则树) 2.3 渲染阻塞 2.4 构建渲 ...
中高级前端面试宝典之浏览器篇
中高级前端面试宝典作为一名前端开发工程师,要掌握的知识点是多而杂的,在面试刷题阶段,经常没头没脑的,我将面试题系统化,分了好几个系列,祝愿大家(包括我)在这个疫情刚过去的互联网寒冬找到事儿少钱多
【转】现学现用WPS,小技巧大帮助
最近老有同事问关于 WPS使用技巧的事,我就把自己这段时间在 WPS中使用过的小技巧整理了一下,希望能对大家起到帮助. 用WPS纵向文本选择去除名单多余数据在网上搜到一份NBA效率值的前百位排名,不 ...
前端调试接口技巧更好的配合后端进行接口调试
首先是我们最常用的调试方式但如果数据很多无论是在这里看返回值还是把返回值打印出来都很不方便我们可以把接口地址复制出来然后粘贴到浏览器地址栏上就可以看到对应返回的json了这里隆重推荐 FeH ...
前端开发小技巧---用tab快速生成标签
下面是小凰凰的简介,看下吧!

我从别人那里偷学的前端调试小技巧(浏览器篇)