js监听浏览器关闭_Chrome浏览器F12开发者工具简单使用

 

1.如何调出开发者工具

  • 按F12调出

  • 右键检查(或快捷键Ctrl+Shift+i)调出 

063581c359bcce6a169739db81ef5553.png

2.开发者工具初步介绍

7b186522cc753cae07fa898aff5230bb.png

chrome开发者工具最常用的四个功能模块:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。

  • 元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改,即时显示。大大方便了开发者调试页面

  • 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~

  • 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。

  • 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。

2.1元素(Elements)

  • 查看元素的代码:点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置

  • 查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。

e94de0d9ad5a104ad824c95cfec37688.png

  • 当然从源代码中读到的只是一部分显式声明的属性,要查看该元素的所有属性,可以在右边的侧栏中查看:

f5468e47a5ec6b19b75d4b7c3c6908d2.png

  • 修改元素的代码与属性:点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。

8812e63f4e11c9cfa800b4ed6dd9c5f8.png

  • 查看元素的CSS属性:在元素的右边栏中的styles页面可以查看该元素的CSS属性,这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件,使编码调试时修改代码变得非常方便。

c53bf2958468b4acfe522cbf12a6669a.png

  • 在Styles页旁边,有一个Computed页面,这个页面展示该元素经过计算之后的所有CSS属性,即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行,是浏览器渲染页面的一个必不可少的过程。

50d1dbe3319db58bdf2d286b07015095.png

  • 修改元素的CSS属性:在元素的Styles页面,可以对元素的CSS属性进行修改,甚至删除原有、添加新属性。不过,这些修改,仅对当前浏览器的页面展示生效,不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。 

  • 给元素添加断点:在元素的右键菜单中选择断点选项(Break on…),选中之后,当元素被修改(通常是被JS代码修改)时,页面加载会暂停,然后可以查看该元素的属性。

 87b43ae4e47bbd2ace20323d64840c05.png

  • 元素断点添加之后,可以在右侧栏的DOM Breakpoints页面中看到,这个页面可以看到当前网页的所有元素断点。

f99e7ca6369ee5260374b561c6704cd1.png

  • 查看元素的监听事件:元素的右边栏的Event Listener页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数),大大提高开发维护的效率。 

99128dcf393b561910bad988772ad290.png

控制台(Console)

  • 查看JS对象的及其属性: 46b28fb84e28d22e70dc7503b0644320.png

  • 执行JS语句: d076a391a56dee0b37cf6810ae21dc49.png

  • 查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉

源代码(Source)

  • 查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。 c285ca5d46c3e9efd14c41f57032c198.png

  • 添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

          2ec6d46aca26b2d2a0c7f8c2b54ac73c.png

  • 中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的

  • 也可以在右边的侧栏上查看: 

       ca50379ab2d43ed10eaec3aeedbd9e15.png

  • 在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。

          b3d9852135356674482cdd858ad9ddce.png

Network详细介绍

54c0ea6b6d5b9319a3a032c9d0a3e086.png

那我就按照从左到右的顺序来写啦~

  • 281f64b92aea5626044f7f46818b990d.png:记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。

  • 5a1c7326c56465f71b1aab87027f42ad.png:清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)

  • 28244cdbca48a13436fef3265436cc95.png:捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。

8e019f010f950e2f1d54bd33dc76627b.png

  • ffaca7e7359182a5b2e1e6e1a0c1798c.png:过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。

795e3b7340ba32e347370b76ac10504c.png


也可以是一些指定条件
指定条件有哪些?

domain:资源所在的域,即url中的域名部分。如 domain:api.github.com

has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin

is:当前时间点在执行的请求。当前可用值:running

larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method:使用何种HTTP请求方式。如 GET

mime-type:也写作content-type,是资源类型的标识符。如 text/html

scheme:协议规定。如 HTTPS

set-cookie-name:服务器设置的cookies名称

set-cookie-value:服务器设置的cookies的值

set-cookie-domain:服务器设置的cookies的域

status-code:HTTP响应头的状态码

  • ed312a0176a2974a5df7a16bc47a22ce.png:显示详细信息

f4af9d4811415b50dd6b476b51b9ded6.png

4dc4854b32c5f5bfc7ccf01ca4933130.png

  • f9af2335289e2f79672793853167b5cd.png:显示时间流

b01f461f77e46c375cd966956c232ee5.png


能够根据时间,查看对应时间下 浏览器请求的资源信息

  • 76cb41bad5d8399bdfc667ba19b4848f.png:是否保留日志 

    当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空的哟~

  • 5ddb237dca930d5ebff01fb3828cea69.png:是否进行缓存

    当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。

  • f5fb97ac386fdcf97705b905a12d7957.png设置模拟限速,如下图所示。

    e0544ba2d8ffb280a28dca2cff9a383e.png

    设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

Network主题内容介绍

d319bbd98fcba219fb9597bf0894e3af.png

下列介绍中,前者为名词解释,后者为举例

  • Name/Pat:资源名称以及URL路径 (main.css)

  • Method:Http请求方法 (GET或者POST)

  • status/Text:Http状态码/文字解释 (200,ok)

  • Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)

  • Initiator:解释请求是怎么发起的,有四种可能的值

           1.Parser  :请求是由页面的html解析时发送2.Redirect:请求是由页面重定向发送3.script :请求是由script脚本处理发送4.other :请求是由其他过程发送的,比如页面里的Link链接点击
  • size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小

请求文件具体说明

点击某个具体请求后的界面,如下图所示:

dcfacec8d6ff48e0a8fca83f93fa4c3e.png

一共分为四个模块:

  • Headers

8c90c573928fc502aeb26bac79795d92.png


Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

  • Preview:预览面板,用于资源的预览。

9c0e76854e3589bcc9aeac9e6ddd33c0.png

  • Response:响应信息面板包含资源还未进行格式处理的内容

ffc1993b606298660a1c92c2100e4d2b.png

  • Timing:资源请求的详细信息花费时间

464cd99f346a12e489dc0044845e5cf9.png

细节补充

对某请求右键,出现页面如下图所示。

18e74d6ce7fa2ca31c0e8be1ef901372.png

  • Copy Request Headers:复制HTTP请求头到系统剪贴板

  • Copy Response Headers:复制HTTP响应头到系统剪贴板

  • Copy Response:复制HTTP响应内容到系统剪贴板

  • Copy as
    cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库,用于配合url语法进行数据传输)

  • Copy All as HAR:将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)

  • Save as HAR with Content:将资源的所有的网络信息保存到HAR文件中(.har文件)

  • Clear Browser Cache:清除浏览器缓存

  • Clear Browser Cookies:清除浏览器cookies

  • Open in Sources Panel:当前选中资源在Sources面板打开

  • Open Link in New Tab:在新tab打开资源链接

  • Copy Link Address:复制资源url到系统剪贴板

若将所有的网络信息保存到HAR文件中,点击这里,可上传查看

  • 869fd171-bc34-eb11-8da9-e4434bdf6706.svg

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答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、付费专栏及课程。

余额充值