chrome使用技巧 chrome开发者工具 浏览器对象 fetch使用介绍
- 2018-05-26 11:07:00
- admin
- 原创 3241
一、 chrome使用技巧
1、chrome软件设置:chrome://settings
2、chrome软件标志:chrome://flags
3、chrome版本信息:chrome://version
重新加载:
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开发者工具
application:查看、编辑、删除cookie;
elements:查看当前页面源码或页面某个元素的源码;
sources:查看站点目录结构以及站点源码,设置http请求断点进行js调试;
network:
1、Filter支持URL和属性过滤,URL和属性忽略大小写,不能使用正则表达式;
2、Filter支持多个过滤条件,多个过滤条件是and关系,减号是取反操作;
3、Preserve log选项可以保留多个页面的请求记录;
4、解析域名:点击请求 > Headers > General > Remote Address
5、A标签target属性是_blank时无法展示网络信息,网页在新窗口展示,需要在新窗口开启开发者工具;
三、浏览器对象
1、navigator.userAgent,浏览器详细信息;
2、window.location.href,浏览器地址信息;
3、document.cookie,cookie信息;
四、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)})