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.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    const api = 'https://api.github.com/users/52Lau/following';
    const getData = () =>{
        axios.get(api)
            .then(res=>{
                console.log(res);
            })
    }
    const outFoo = ()=>{
        getData();
    }
    outFoo();
</script>
</html>

Chrome-快速定位浏览器发起的请求【工具篇】

chrome

描述

示例

source code