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

最新推荐文章于 2023-06-21 18:45:01 发布
最新推荐文章于 2023-06-21 18:45:01 发布
阅读量221 收藏
点赞数
文章标签： js监听浏览器关闭 vue 浏览器调试 样式如何定位样式 浏览器设置updatepanel不起作用 监听浏览器关闭或者页面关闭 通过句柄操控浏览器

浏览器调试技巧-第二节

“

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

Elements元素面板

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

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

5c69f6e9887c20cce4d961e1077cb4c4.png
image-20200904125740890

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

节点调试

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

04cb35f77486a3047de1f1dd2e882505.png
image-20200904133111865
编辑节点

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

7ced8b0425286cee2751dabb96753949.png
image-20200904144306055
拷贝节点

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

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

c07c9c917ac2fa15e03aac397e637221.png
image-20200904144331843
操作

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

4d188fd810655aeaecccdaa5d580ed28.png
image-20200904131826875
查看节点事件

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

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

3f88e3600a39623c4e922e4fce28ff90.png
image-20200904142438945

然后右键可以加入监听

d54b6c77cd01e8c1a0a0e69a545cce60.png
image-20200904141949428

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

辅助

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

全局变量

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

样式调试

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

编辑样式

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

6d9366341b1a13fcc7c8af84e329e8ed.png
image-20200904144925867

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

选择颜色

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

6b6bd73a99b10774d54ad35e555f1b6e.png
image-20200904153137448
选择阴影

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

b280a2a3f35ceccd522bec11624b23b9.png
image-20200904153313400
选择动画的绘制曲线
83b39eac4cbefb6cb34a2dc0fa35a315.png
image-20200904164701097
查看数据

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

09ef3473f289aed0ca440c8c0ed037db.png
image-20200904145131805

Sources资源面板

文件

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

325f27b105377ee842bc7cdb629bbad1.png
image-20200904171517173

编辑器

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

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

349dae88f55d3c61ef79ec1940cfa6dd.png
image-20200904171658025

代码覆盖

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

9d51e315d97139572ca4bdd0355d84b0.png
image-20200904171822012

代码片段

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

adcf31d8edb2f22713396a0f45b8f85c.png
image-20200904172225746

每次使用只需要右键

d4dd1011ebc50232831013abff2143b4.png
image-20200904172321443

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

断点调试

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

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

dbbb02a516bbe4d287d3efbc1aee8c5c.png
image-20200904172615720
weixin_39877182
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript详解(第2版)
04-25
第2章　脚本的安装　24 2.1　HTML文档与JavaScript　24 2.2　语法细节　27 2.2.1　区分大小写问题　27 2.2.2　自由形式及保留字　27 2.2.3　语句及分号　28 2.2.4　注释　28 ... 2.2.5　〈script〉标签　 　2.3　...
vc++ 应用源码包_2
09-15
Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与...
监听浏览器关闭JS
chenbei331的专栏
06-04 185
window.onbeforeunload = onbeforeunload_handler;       window.onunload = onunload_handler;       function onbeforeunload_handler(){           alert("非正常任务保存操作，如果确认退出，您的任务将进入审核或者未完成状态");         var
JS做谷歌浏览器关闭事件监听
qq_39704682的博客
01-02 9522
插件开发监听谷歌关闭事件 监听chrom浏览器关闭事件，区分刷新和关闭 js监听谷歌浏览器关闭事件
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
云_飞扬
12-20 4万+
监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
JS监听页面关闭
学而不思则罔
06-21 3852
但在新版本的浏览器中，为了安全性，已经不支持自定义弹窗。在以前（旧版本的浏览器中），可以自定义提示文案。能做的，只是调用浏览器自带的提示确认窗格。
js监听浏览器关闭的问题
我的技术笔记
05-24 580
最近在一个网页上需要监视用户是否点击关闭窗口的动作，在网上查了个遍，总结一下： 1. 利用window.onbeforeunload()和window.onunload()事件，但是在关闭当前窗口，跳转到其它窗口，刷新窗口，回退/前进，回主页的操作时都会触发该动作： [code="javascript"] [/code] 2. 判断是否点击窗口右上角叉号，区分是否为关闭...
vc++ 应用源码包_1
09-15
Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与...
vc++ 应用源码包_6
09-15
Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与...
vc++ 应用源码包_5
09-15
Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与...
php浏览器关闭事件,JavaScript_JS针对浏览器窗口关闭事件的监听方法集锦，本文实例总结了JS针对浏览器 - phpStudy...
weixin_42381087的博客
04-03 201
JS针对浏览器窗口关闭事件的监听方法集锦本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下：方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示)window.onbeforeunload=onclose;function onclose(){if(event.clientX>document.body.clientWidth&...
保存用户登录状态token，以及退出清除登录状态（node/后端设置token返回实现完整流程）
weixin_51935690的博客
05-22 1万+
利用vuex中store进行进行保存 代码如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {//状态从本地获取 token: localStorage.getItem("token") || '' }, //同步修改state里面的值 mutations: { //包含更新多个state函数的对象 SET_TOKE.
js监听浏览器关闭时间执行ajax,JS监控关闭浏览器操作的实例详解
weixin_35909443的博客
08-06 578
JS监控关闭浏览器操作的实例详解需求如下：用户关闭浏览器通知后台。方案如下：1.采用js监控关闭浏览器操作。2.用户关闭浏览器的时候发ajax请求到后台，执行相应的业务操作代码如下： New Document window.onbeforeunload = onbeforeunload_handler;window.onunload = onunload_handler;function onbe...
js监听浏览器关闭事件 onbeforeunload和Onunload不生效 使用onpadehide可以监听到浏览器关闭事件
sly94的博客
04-26 2261
刷新页面时onbeforeunload和Onunload都不生效 一：onbeforeunload is work 没有alert出来，事件触发了，因为页面跳转的时候，window对象和DOM对象都已经被销毁了，所有alert不能执行如果在事件里面加上一段ajax请求是可以执行的，但是ajax请求一部返回就不一定能执行到。   window.onbeforeunload = function
Chrome 开发工具之Sources
weixin_34100227的博客
06-19 690
Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后，下面来试试这些功能都是如何使用的。 文件列表 展示当前页面内所引用资源的列表，和平常的文件tree一样。 内容区域 可在该区域查看打开的文件的脚本，也可以在区域内下断点，打断指定执行代码行。 断点方式： 1.在脚本中写入debugger 2.在Sources面板文件...
前端调试小技巧 （监听页面上的dom元素被修改）
weixin_45188171的博客
12-20 253
右击 选择break on 选择subtree modifications 再次运行，如果页面上的元素被修改就会被断点给短住
js 监听浏览器页面关闭事件
PrimaryColor
05-25 5588
方法： window.onbeforeunload = function() { //功能函数 } 如果想阻止关闭，给一个确认弹窗： window.onbeforeunload = function(e) { var e = window.event ||e; e.returnValue="确认关闭页面吗？"; } 不过returnValue给的字符是没有用的，浏览器始终都只会返回固定的提示，如下： ...
怎么关闭谷歌浏览器自动断点调试？打开网页按F12之后，打开任何网页都会自动断点调试js
热门推荐
microcosmv的博客
03-07 4万+
谷歌浏览器关闭自动调试
SSO单点登陆系统原理与实现
外星喵的博客
03-27 1万+
单点登录（Single Sign On），简称 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统，得到授权而无需再次登录，包括单点注销。 由于分布式环境下，各个子系统是通常部署在不同的服务器中，那么使用传统方式的 session 是无法解决的，我们需要使用相关的单点登录技术来解决。 web应用采用browser/server架构，http作为通信协议。http是无状态协议，浏览器的每一次请求，服务器会独立处理，不与之前
js 监听浏览器关闭 刷新
最新发布
06-28
### 回答1： 在Web开发中，经常需要通过JavaScript来监听浏览器关闭和刷新事件。可以使用window对象的beforeunload和unload事件来实现这个功能。 beforeunload事件会在用户要关闭页面时触发，可以用来在用户离开前提示一些消息。可以通过window.onbeforeunload属性来绑定beforeunload事件处理程序。 当用户点击确定按钮时，页面将被关闭，如果用户点击取消按钮，则页面将保持不变。在beforeunload事件处理程序中，可以通过返回一个非空字符串来提示用户需要保存的未完成操作。 unload事件会在页面完全卸载后触发，可以用来清除一些资源，例如定时器和事件监听器等。可以通过window.onunload属性来绑定unload事件处理程序。 需要注意的是，对于浏览器关闭事件，不同的浏览器有不同的支持方式和行为，因此，在实现监听浏览器关闭和刷新事件时，需要进行兼容性测试，以保障其在不同的浏览器中的稳定性和可靠性。 总的来说，通过使用 JavaScript 监听浏览器关闭和刷新，可以处理一些必要的业务逻辑，从而提升用户体验和应用稳定性。 ### 回答2： JavaScript 可以监听浏览器关闭和刷新等事件，以促进更好的用户体验。这些事件通常是用户主动进行的，但也有可能是浏览器崩溃或其他不可预测的情况引发的。 要监听浏览器关闭事件，可以使用 window.onbeforeunload 事件。这个事件将在浏览器窗口将要关闭之前触发。可以将要执行的代码放在这个事件的回调函数中，以便在用户关闭浏览器时执行。 要监听浏览器刷新事件，可以使用 window.onbeforeunload 事件和 window.onload 事件。在页面加载时，window.onload 事件会被触发。然后，如果用户刷新了页面，window.onbeforeunload 事件会在页面重新加载之前被触发。可以使用这些事件来保存当前页面的状态，并在页面重新加载时恢复状态。 要注意的是，浏览器的不同版本和不同设置可能会影响这些事件的行为。有些浏览器可能不允许在 onbeforeunload 事件中弹出警告框或确认框，而有些浏览器则可以。因此，需要谨慎处理这些事件，并确保它们不会对用户造成不必要的干扰或安全风险。 综上所述，JavaScript 监听浏览器关闭和刷新事件可以帮助我们提供更好的用户体验，并确保我们的网站和应用程序在这些情况下仍然能够正常使用。 ### 回答3： JS 监听浏览器关闭或刷新是 Web 开发中比较常见的需求，主要涉及到浏览器事件的监听和处理。比如在某些场景下，当用户关闭浏览器或刷新页面时，需要提醒用户或执行一些特定的操作。 浏览器关闭事件监听： JS 监听浏览器关闭主要通过 `window` 对象提供的 `beforeunload` 事件来实现。`beforeunload` 事件在浏览器卸载页面之前被触发，可以用来防止用户误操作或提醒用户保存数据。 例如，在页面中添加以下 JS 代码，就能监听浏览器关闭事件： ``` window.addEventListener('beforeunload', function(event) { event.preventDefault(); return event.returnValue = '确定离开此页面吗？'; }); ``` 上述代码中，我们使用 `addEventListener` 方法绑定了 `beforeunload` 事件的监听器。在事件回调函数中，我们使用 `event.preventDefault()` 方法来阻止浏览器默认的关闭行为，并返回一个提示用户的字符串，如果用户确认离开页面，才能真正关闭页面。 浏览器刷新事件监听： JS 监听浏览器刷新主要通过 `beforeunload` 和 `unload` 事件组合使用实现。当用户刷新页面时，会先触发 `beforeunload` 事件，然后触发 `unload` 事件。 例如，在页面中添加以下 JS 代码，就能监听浏览器刷新事件： ``` window.addEventListener('beforeunload', function(event) { // Do something before refreshing }); window.addEventListener('unload', function(event) { // Do something after refreshing }); ``` 上述代码中，我们分别使用 `addEventListener` 方法绑定了 `beforeunload` 和 `unload` 事件的监听器，并在事件回调函数中分别执行了特定的操作。 需要注意的是，由于 `beforeunload` 事件可以阻止浏览器关闭或刷新页面，因此在使用它时需要谨慎考虑，以避免影响用户体验和引起安全问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值