js监听浏览器关闭_浏览器调试技巧第二节

浏览器调试技巧-第二节

“

视频已发布到哔哩哔哩，视频更详细！

Elements元素面板

关于页面的直接调试基本都在这个面板里面进行

点击1.可以选择节点，我们选择2.这个节点，然后就直接进入元素面板了

image-20200904125740890

快速展开全部子节点的方式 ：按住alt再点击节点的展开符号

节点调试

你可以通过这个方式选择页面中的任意节点来进行调试，也可以直接在右方的元素面板点击切换节点，在任意节点通过鼠标右键都可以激活更多的功能

image-20200904133111865

编辑节点

在1.这个区域你可以直接编辑节点的属性，比编辑器更为直观和迅速；

image-20200904144306055

拷贝节点

在2.这个区域你可以进行拷贝这个节点的一些东西，比如js选择器，节点样式或者整个节点；

这在查看别人网站效果时非常有用

image-20200904144331843

操作

在3.这个区域你可以隐藏节点或者修改当前节点的状态，比如聚焦，鼠标移入等操作，同样的这个操作你可以在右方的styles面板直接切换

image-20200904131826875

查看节点事件

当你想知道页面中某一个节点的变化是哪些JavaScript代码在操控它，可以使用 Break on 来监听页面

比如我想监听这个主题选择面板的切换与显示是谁在控制，我们点击这个红框的元素面板节点

image-20200904142438945

然后右键可以加入监听

image-20200904141949428

此时我们再次去点击切换这个主题面板的显示于隐藏，便会自动跳到JavaScript代码中

辅助

在4.这个区域是对我们操作的一个辅助，比如滑动到其他地方快速定位到当前选择的节点，或者关闭所有已展开的节点

全局变量

点击5.可以将这个节点存储为一个全局变量，可以直接在console面板使用，这个在上面已经提到过

样式调试

直接在浏览器中调试样式也是非常方便的，元素面板的右边部分就是样式面板

编辑样式

可以点击左边选择框来决定这个效果是否展示，还可以直接编辑里面的具体属性

image-20200904144925867

带删除线的效果表示这个效果在这个浏览器不起作用

选择颜色

只要是有颜色的地方可以点击小方块进入可视化选择界面，支持取色和预定义颜色非常方便

image-20200904153137448

选择阴影

可视化的方式去制作一个阴影是不是更加的直观和方便呢

image-20200904153313400

选择动画的绘制曲线

image-20200904164701097

查看数据

点击Computed标签可以查看当前节点的各种样式数据，并可以通过小箭头直接前往这个效果的源代码位置

image-20200904145131805

Sources资源面板

文件

在page这个栏目里面，会显示当前页面加载的文件

image-20200904171517173

编辑器

Filesystem更像一个代码编辑器，允许你编辑代码，并保存本地；

你完全可以使用它来进行前端的代码编辑

image-20200904171658025

代码覆盖

覆盖这个地方要稍微复杂一点，在页面调试中，我们调试css样式，修改就能立即看到效果，但是调试JavaScript代码必须刷新才能看到效果，线上网站一刷新就恢复原样了，这时候就可以在本地新建一个项目和线上项目一模一样，然后选择代码覆盖，此时你调试JavaScript代码就能刷新也能看到效果了

image-20200904171822012

代码片段

你可以编辑一些常用的代码片段，保存在snippets里面，即使关闭浏览器也不会消失

image-20200904172225746

每次使用只需要右键

image-20200904172321443

你设置可以在这个里面写入爬虫、抢购、点赞等JavaScript脚本代码

断点调试

这个不必多说，大家必会！

只需要在代码左边单击，刷新页面即可，可以在右边查看详情和逐步调试

image-20200904172615720