前端开发调试|【青训营笔记】这是我参与「第四届青训营」笔记创作活动的第8天今天讲的课程是前端开发的调试，我将其分为三

这是我参与「第四届青训营」笔记创作活动的第8天 今天讲的课程是前端开发的调试，我将其分为三部分：

CSS调试 ---Elements
JS调试 ---Sources
Chrome DevTools其他tab的作用

01-CSS调试---Elements

当我们只是大概的设置了CSS样式，需要进一步确定时，可以利用Elements来进行调试。或者样式我们预期的有差别的时候，可以利用它来找出问题。首先准备好我们的初始样式：

初始样式.png 修改数据值---直接修改样式

调整边框.png

结果：边框变细，颜色变为黑色

.ls---通过类名修改样式

类名工具.png

结果：边框变为有圆角

.hov---控制伪类状态查看样式当我们书写了伪类样式要调整时，可以通过.hov添加或修改状态

伪类工具.png

结果：处于.hover状态

伪类.png

02-JS调试 ---Sources

利用Sources可以观察我们js代码的运行过程，包括数据变化。

下面我利用一个循环的例子来演示：

<script>
    var months=Number(prompt())
    debugger
    switch(months){
      case 1:alert('你是1月出生的。');
       case 2: alert('你是2月出生的。');
        case 3: alert('你是3月出生的。');
         case 4: alert('你是4月出生的。');
          case 5: alert('你是5月出生的。');
           case 6: alert('你是6月出生的。');
            case 7: alert('你是7月出生的。');
             case 8: alert('你是8月出生的。');
              case 9:alert('你是9月出生的。');
               case 10:alert('你是10月出生的。');
                case 11: alert('你是11月出生的。');
                 case 12: alert('你是12月出生的。');
    }
  </script>