chrome开发者工具

最新推荐文章于 2024-09-18 10:46:22 发布

原创最新推荐文章于 2024-09-18 10:46:22 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome devtools #前端

工具类专栏收录该内容

8 篇文章

订阅专栏

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chrome debugger</title>
    <style>
        .title{
            text-align: center;
        }

        table{
            border: 1px solid #ddd;
            border-collapse: collapse;
            line-height: 35px;
            margin: 0 auto;
            color: #666;
        }
        table td{
            width: 200px;
            border: 1px solid #ddd;
            text-align: center;
        }
        table th{
            border: 1px solid #ddd;
            background: #eee;
        }

        .name{
            color: #888;
            font-weight: bold;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script type="text/javascript">
        let demo = 'demo';
        let surname = ['张', '陈', '李', '王', '鲁', '叶', '苗', '冯', '彭', '卢'];
        let realname = ['清寒', '之臣', '雨琪', '正浩', '志远', '星驰', '天佑', '叶磊', '成瑞', '雨泽', '雅婷', '紫心', '瑞景'];

        // 生成数据
        function producePerson (num) {
            console.log('开始组装数据');
            let data = [], surnameIndex = 0, nameIndex = 0;
            for (let i = 0; i < num; i++) {
                surnameIndex = parseInt(Math.random()*826*(i+1)) % (surname.length);
                nameIndex = parseInt(Math.random()*6256*(i+1)) % (realname.length);
                data.push({
                    id: i+1,
                    name: {
                        surname: surname[surnameIndex],
                        realname: realname[nameIndex]
                    },
                    age: parseInt(Math.random()*100%45),
                    score: parseInt(Math.random()*100)
                })
            }
            console.log('数据组装完成');
            return data;
        }
        // 渲染数据
        function renderPerson (data) {
            let html = [];
            html.push("<h3 class='title'>学生分数统计</h3>");
            if (data && data instanceof Array) {
                html.push("<table>");
                html.push("<tr>");
                    html.push("<th>序号</th>");
                    html.push("<th>姓名</th>");
                    html.push("<th>年龄</th>");
                    html.push("<th>分数</th>");
                html.push("</tr>");
                for (let i = 0; i < data.length; i++) {
                    // 隔行变色
                    if (i % 2 !== 0) {
                        html.push("<tr style='background:#eee;'>");
                    }else {
                        html.push("<tr>");
                    }
                    // 填充数据
                    html.push("<td>" + data[i].id + "</td>");
                    html.push("<td>" + data[i].name.surname + "<span class='name'>" + data[i].name.realname + "</span>" + "</td>");
                    html.push("<td>" + data[i].age + "</td>");
                    html.push("<td>" + data[i].score + "</td>");
                    html.push("<tr>");
                }
                html.push("</table>");
            }
            document.getElementById(demo).innerHTML = html.join("");
        }
        // 定义数据对象
        let students = producePerson(50);
        // 渲染数据
        renderPerson(students);
    </script>
</body>
</html>

在开发者工具中用户做的所有改变都是临时的页面刷新/关闭后这些改变就都没有了

Elements

可以动态查看我们的元素

1.鼠标右击元素-》检查就可以在右边的elements中定位到当前元素在HTML中的代码以及在styles中定位到样式
点击了标题“学生分数统计”之后
在这里插入图片描述

2. 在这里插入图片描述
点击右边的这个后鼠标在左边页面滑动时会有选中元素的效果元素的样式等都会动态的显示出来并且会在右边elements中实时定位到元素在HTML中的代码在styles中定位到样式鼠标点击某个元素可以在elements中定位到该元素在HTML中的代码在styles中定位到样式点不点击都会定位到该元素在HTML中的代码在styles中定位到样式
鼠标悬浮在元素上
3.可以在styles中随意添加样式样式会实时更新到页面
在这里插入图片描述
4.当你不知道确定的数字需要调试时比如不知道自己想要的效果的行高是多少字体大小是多少时可以调试数字：

点一下这个数字让它变成可编辑状态按键盘的上/下键可以+1/-1 进行微调
5.这里是样式所在代码的位置点击可跳转到代码相应位置:7代表第7行
在这里插入图片描述
6.样式前面的这个框勾上代表样式生效不勾则该样式不生效

不勾则该样式不生效

7.元素的盒模型

network

1.提供过滤网络请求的操作
XHR：Ajax请求异步请求
script：脚本文件
在这里插入图片描述
2.该页面所有的网络请求都在这里显示

当你把鼠标放在某个name上面时会显示该文件在source中的位置
点击网络请求时会显示请求头等详细信息

控制器

source

1.对所有资源（包括网络请求到的资源）进行整理
2.左边时目录中间是代码右边是断点调试
中间的左下角有个{} 点一下可以格式化代码格式完{}会消失
在这里插入图片描述

console

1.控制台用于打印打印内容后面跟的那些表示在哪里打印的数字代表行点击可以跳转到响应位置
在这里插入图片描述
2.这里可以过滤你打印的信息

application

可以在这里看到存储缓存等信息
在这里插入图片描述

debugger

1.打完断点刷新页面程序就会停留在你打断点的地方这个位置之前执行的程序的变量的值都会显示你把鼠标移动到变量上面也会显示值
在这里插入图片描述
2.第一个：跳过这个断点让程序执行下一个断点
第二个：单步执行执行一行代码
第三个：执行一条语句执行一个分号
第六个：清除断点

当你执行到某一行代码时想看某个变量的值可以直接在控制台输入变量名然后回车就可以在控制台看到了
在这里插入图片描述