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

一、 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：查看站点目录结构以及站点源码，设置请求断点进行JS调试；

network：查看网络请求，拷贝网络请求，重放网络请求Replay XHR；

console：使用当前域名的cookie执行网络请求，执行javascript脚本；

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)})

五、promise使用介绍

1、入门帮助：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

2、参考手册：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

3、构造对象：new Promise(executor)

4、参数签名：executor(resolve, reject) {}

5、标记状态：resolve标记成功，reject标记失败

6、状态转换：pending(待定) -> fulfilled(已成功)

7、状态转换：pending(待定) -> rejected(已失败)

8、执行回调：then成功时回调，catch失败时回调；

09、executor在主线程立刻执行，如果耗时会卡住主线程；

10、then和catch被放入事件循环，主线程执行完成之后执行；

function sleep(delay) {
    let start = new Date().getTime();
    while (new Date().getTime() < start+delay);
}
console.log("1");
const p = new Promise(resolve => {
    sleep(1000);
    console.log("2");
    resolve();
});
p.then(() => {
    console.log("4");
});
console.log("3");