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

2018-05-26 11:07:00
admin
原创 2871
摘要: 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)})

发表评论
评论通过审核之后才会显示。