chrome使用技巧 chrome开发者工具 浏览器对象 fetch使用介绍

一、 chrome使用技巧

1、chrome软件设置：chrome://settings

2、chrome软件标志：chrome://flags

3、chrome版本信息：chrome://version

4、软件标志中可以设置http下载告警；

重新加载：

1、正常重新加载，F5，CTRL+R，加载时使用缓存；

2、硬性重新加载，CTRL+F5，CTRL+SHIFT+R，加载时忽略缓存；
3、清除缓存并硬性重新加载，先按F12，然后长按重新加载按钮，加载时忽略所有缓存，包括通过js下载的文件；

清除所有缓存快捷键：ctrl+shift+delete

忽略ssl校验错误：增加启动参数--ignore-certificate-errors

Err-Cache-Miss：可能导致重新提交错误请求，可能导致cookie更新失败，解决方法是重启浏览器或清除缓存；

二、 chrome开发者工具

elements：查看当前页面源码或页面某个元素的源码；

sources：查看站点目录结构以及站点源码，设置http请求断点进行js调试；

application：查看、编辑、删除cookie；

network：

1、Filter支持URL和属性过滤，URL和属性忽略大小写，不能使用正则表达式；

2、Filter支持多个过滤条件，多个过滤条件是and关系，减号是取反操作；

3、Preserve log选项可以保留多个页面的请求记录；

4、解析域名：点击请求 > Headers > General > Remote Address

5、A标签target属性是_blank时无法展示网络信息，网页在新窗口展示，需要在新窗口开启开发者工具；

三、浏览器对象

navigator.userAgent可以获取浏览器详细信息；

四、fetch使用介绍

1、fetch函数用于发起异步http请求；

2、fetch相比XMLHttpRequest更容易使用；

3、promise是异步对象，fetch使用promise实现异步操作；

4、帮助说明：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

发起get请求：

fetch('http://localhost:8080/springmvc/test_get.do?name=who',{
method: 'GET', 
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
}).then((resp)=>{return resp.text()}).then((data)=>{console.log(data)})

发起post请求：
fetch('http://localhost:8080/springmvc/test_post.do',{
method: 'POST', 
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'name=who'
}).then((resp)=>{return resp.text()}).then((data)=>{console.log(data)})