浏览器开发工具使用技巧篇（一）html +css调试

2020-12-18 217 阅读1分钟

1-1 开篇

在这里插入图片描述

1-2 来，认知一手我们的开发者工具

在这里插入图片描述

1-3 编辑样式

<!DOCTYPE html>
<html>
  <head>
    <title>document</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .logo {
        width: 200px;
        height: 200px;
      }
      .box {
        margin-left: 450px;
        margin-top: 150px;
        background-color: yellow;
        width: 400px;
        height: 400px;
      }
      .logo {
        margin-top: 150px;
        margin-left: 10px;
      }
      div {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="1.pn" class="logo" />
    </div>
  </body>
</html>
<script type="text/javascript"></script>

1、我写了一段很简单的测试代码，里面包含几个错误，我怎么排查，如果是几千行的话？ 2、在这里插入图片描述

3、我们在检查页面对这个元素尝试放在中心位置别忘了对本来的编译器vs code 也要修改哦

在这里插入图片描述

1-3-2. 编辑样式再来一课

在这里插入图片描述

在这里插入图片描述 依旧需要注意的是这个地方的改动编辑器不会同时进行改动需要将这部分内容复制到编辑器才会同时发生改动

接下来想说的是如何存图片 1、可以选择图片右键，图片另存为就可 2、右键检查，选中图片，然后右键在这里插入图片描述打开图片新页面后右键另存为即可

在这里插入图片描述注意：黑色小圆点不是黑色感叹号哈

如果页面是动态效果，怎么进行编辑？ 1、鼠标移动触发动态效果 2、右键检查就会在代码中展示选择的位置 3、可进行编辑

如果想请

请作者喝一杯卡布奇诺

在这里插入图片描述