PC端 & 移动端开发调试

2023-02-14 143

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 学习前端难免会频繁的调试和遇到很多的Bug，所以掌握好开发调试就能更快的找到Bug和去Debug，通过开发者工具能够更好的将前端代码写的更好、更美

前言

学习前端难免会频繁的调试和遇到很多的Bug，所以掌握好开发调试就能更快的找到Bug和去Debug，通过开发者工具能够更好的将前端代码写的更好、更美

详细知识点介绍

Pc端

Chrome DevTools

打开方式：鼠标右键后点击检查，或者按键F12

网络异常，图片无法展示

Elements（元素）

可以查看html代码，点击styles可以动态的修改样式
输入字符串可以给动态的元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式（字号，颜色，宽度等）
Computed下点击样式的箭头可以跳转到styles

案例代码demo：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .small  {
            width: 20px;
            height: 20px;
        }
        .box1 {
            height: 200px;
            width: 200px;
        }
        .red {
            background-color: red;
        }
        .box2 {
            height: 400px;
            width: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
复制代码

改变颜色：可以直接点击background-color进行调试

网络异常，图片无法展示

对应的样式：点击直接就可以进入修改样式

网络异常，图片无法展示

Console（日志）

console.table：具象化的展示了JSON 和数组数据
console.dir：通过类似文件时树的方式展示对象的属性
占位符：给日志添加样式，可以突出重要的消息

Sorce Tab

网络异常，图片无法展示

区域一：页面资源文件目录树
区域二：代码预览区域
区域三：Debug工具栏

代码压缩后如何调试：一般代码经过压缩后可读性会非常的差，可以用source mapp，对源码映射

移动端

真机调试：Android 、ios
代理调试：Charles 、progress

PC端 & 移动端开发调试

前言

详细知识点介绍