前端debug的特点包括多平台、多环境、多工具、多技巧。
打开浏览器，点击检查.element对应网页中的元素和样式，点击.cls可以选择元素的样式，也可以在文本框中添加新的样式，还可以修改已有的样式，对于特定状态下的样式，可以选中元素，右键，点击force state，然后调试，在类名特别多时，可以在computed中搜索类名。console可以输出日志，可以用占位符给日志添加样式，%s对应字符串，%o对应对象，%c对应样式，%d对应数字，不同类型的值输出颜色不同，console.table可以具象化地展示json和数组数据，console.dir可以通过类似文件树的形式展示对象的属性。source可以展示项目的源代码，可以在想要暂停代码的地方加上关键字debugger，进入断点调试界面，暂停/继续按钮可以暂停/继续程序。network可以显示页面打开时请求的各种资源，可以点击按钮筛选出不同类型的资源，点击xhr可以看到页面使用的各个接口及其返回结果，接口的数量，不同节点对应的耗时，接口之间的串行并行情况，network还可以模拟弱网环境，测试页面在网络较差时的加载速度，点击接口，可以看到接口在后端返回的结果，和与请求相关的信息。application显示和浏览器存储有关的信息，可以修改或删除存储的数据。performance用来测试页面性能，可以点击按钮录制页面，查看页面各个部分的耗时，以及每一帧的情况，还可以模拟不同的cpu和网络环境，测试页面在不同环境下的性能。
总的来说，chrome dev是前端pc端调试的基本方法，多数问题都可以用chrome dev解决。
