chrome
描述
对于前端开发者来说，chrome 中有很多很实用的工具可以快速的帮助我们解决一些实际的问题，今天介绍chrome中一个不太常见但却很实用的一个工具面板，可以很快速的帮助我们定位到发起请求的代码位置，以及他的函数调用栈。
示例
我们使用github 对外开放的一个接口做测试,放在一个页面中使用 axios 来发出这个请求，为了说明问题并没有直接发出请求，而是封装在getData的函数中，在outFoo函数中调用getData，便于观察这个接口的调用栈，如下图：
点击上述函数调用栈中的outFoo会立刻跳转到对应的代码部分
使用这种办法可以在接手一个新项目的时候，可以有效避开一堆复杂的业务代码，直接有效的定位到发出请求的代码位置。有时候往往有意想不到的效果。
source code
上述代码部分，可以粘贴下来自己查看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>demo page </div>
</body>
<script src="https://cdn.bootcss/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
const api = 'https://api.github/users/52Lau/following';
const getData = () =>{
axios.get(api)
.then(res=>{
console.log(res);
})
}
const outFoo = ()=>{
getData();
}
outFoo();
</script>
</html>
更多推荐
Chrome-快速定位浏览器发起的请求【工具篇】
发布评论