浏览器基础技巧

浏览器-查看-查看源文件-即网页的 html 代码
右键单击：检查，可以看到选择元素的代码行

Fn+F12：开发人员工具

以下是开发人员工具的介绍

Element

战士整个页面的html结构，选中需要定位的结构，可以在style中查看到该结构的样式（Css）。

HTML

在行上右键进行操作

• 删除节点（右键：delete element）：删除当前元素。
• 以HTML格式编辑（右键：edit as html）：可以更改HTML并即时查看结果。对于调试和测试非常有用。
• ：hover /：active /：focus（右键 force state）：强制启用元素状态，可以查看其样式。
• 复制/复制为HTML（右键：copy）：复制当前选择的HTML。

可以进行任何更改，但不能保存更改。

CSS

• 单击每个声明旁边的复选框，以查看删除声明会发生的情况。
• 单击每个速记属性旁边的小箭头以显示该属性的等效速记。
• 单击属性名称或值将弹出一个文本框，可以在其中键入新值以获取样式更改的实时预览。

  **

  JavaScript调试器

  sources部分

  
  

  Console（控制台）

  console是控制台，可以在代码中通过console.log('需要打印的内容')代码打印出自己需要的内容，在这个部分显示出来，从而检查逻辑错误。
  

  Network

  network用于检查发起的请求是否成功被接受，状态码是多少，一般一次点击会生成两条记录，一个是预检，一个是正式，生成在最底部，两个都可以查看一下。
  
  右侧preview里面显示具体的错误信息
  

  
  

  Application

  通过sessionStorage.setItem()储存在本地的数据都在这里显示，比如token。