浏览器中调试web你知道吗?

简介: 这件事开始是在6个月以前吧,看到大牛在浏览器中调试web,通过前一段时间的运用证实了自己当时看到之后没有立刻将这种浏览器调试web的方式运用到自己的编程中来的那种愚昧,同时也体现出来自己思维中欠缺的东西,并挖掘出禁锢自己将来发展的力量。

【背景】


   这件事开始是在6个月以前吧,看到大牛在浏览器中调试web,通过前一段时间的运用证实了自己当时看到之后没有立刻将这种浏览器调试web的方式运用到自己的编程中来的那种愚昧,同时也体现出来自己思维中欠缺的东西,并挖掘出禁锢自己将来发展的力量。


【介绍】


   浏览器中调试web,就是在浏览器中按F12出来之后,再特定的地方通过临时写js代码,来达到自己调试的效果,完全不用自己再去程序中写入js代码编辑,执行,再测试,这样一种效率的提高,我可以用是一个质的变化来形容。


   并且用这样的方式,你还可以突破自己未知的领域,怎么我这样说呢,其实凡是写过代码的人都知道,想要通过js获取页面中的任何一个元素,或者获取后台返回的对象、json串、值中任何一个元素或者对象,都需要知道其中js中方法的调用,或者明白后台返回的东西的值;通过浏览器中写入js代码,让页面中的元素以对象的形式打印出来,之后你看着,想取什么就取什么,也可以将后台传过来的东西打印出来,之后无论你怎么操作都会非常方便的O(∩_∩)O~


【运用】


   相信读者看了小编上面的介绍,肯定会很乱的,不怕,只要你去真正运用几次,相信你会爱上它的O(∩_∩)O~


   打开浏览器之后,按F12,通过图片中的方法,将最下面可以输入内容的框调出来,让你需要监视的js代码经过之后,再这个小框中输入相应的js代码来显示对应的效果,以及在这里输入js方法获取页面中任何一个元素,那么你就可以对其进行任何操作了O(∩_∩)O~


   相比你写入js,编译,执行,再调试得来的效率可想而知O(∩_∩)O~


【示例】


   下面主要以火狐浏览器为主,任何一款浏览器都可以进行这样的操作,直接看下图:


20160724154130796.png


   下面是谷歌和360浏览器如何将这个调试框调出来的方法:


20160724154202162.png


20160724154230350.png


【感受】


   真正用它进行调试之后,我提高的不仅仅是效率的问题,一些我不会,不懂如何获取页面中的元素的方式也可以完全解决很多web中的问题了,开心之余,思考了自己学习共工作的方式。


   总结一点就是,对工具的运用很重要,对自己思想禁锢的解除更重要,加油O(∩_∩)O~

相关文章
|
4月前
|
Web App开发 iOS开发
Web 浏览器
【8月更文挑战第27天】Web 浏览器。
62 2
|
14天前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
56 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
2月前
|
Web App开发 Android开发
利用firefox调试安卓手机端web
该教程详细介绍如何通过Firefox浏览器实现手机与电脑的远程调试。手机端需安装最新版Firefox,并按指定步骤设置完成;电脑端则需安装15版及以上Firefox。设置完成后,通过工具栏中的“远程调试”选项,输入手机IP地址即可连接。连接确认后,即可使用电脑端Firefox调试器调试手机上的Web信息。注意,调试前手机需提前打开目标网页。
76 2
|
2月前
|
Web App开发 XML JavaScript
Python 操作浏览器:让 Python 和 Web 世界合二为一
Python 操作浏览器:让 Python 和 Web 世界合二为一
|
4月前
|
数据采集 Web App开发 测试技术
使用Selenium调试Edge浏览器的常见问题与解决方案
在互联网数据采集领域,Selenium常用于自动化网页爬取。针对使用Edge浏览器时遇到的启动远程调试失败、访问受限及代理IP设置等问题,本文提供了解决方案。通过特定命令启动Edge的远程调试模式,并利用Python脚本配合Selenium库,可实现代理IP、User-Agent的设定及Cookie管理等高级功能,有效提升爬虫稳定性和隐蔽性。遵循步骤配置后,即可顺畅执行自动化测试任务。
854 1
使用Selenium调试Edge浏览器的常见问题与解决方案
|
4月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
53 1
|
4月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
322 1
|
4月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
84 0
|
4月前
|
存储 JSON 监控
FastAPI日志之谜:如何揭开Web应用监控与调试的面纱?
【8月更文挑战第31天】在现代Web开发中,日志记录对于监控应用状态、诊断问题和了解用户行为至关重要。FastAPI框架提供了强大的日志功能,使开发者能轻松集成日志记录。本文将详细介绍如何在FastAPI中设置和利用日志,包括基础配置、请求响应日志、错误处理和结构化日志等内容,帮助提升应用的可维护性和性能。
158 0
|
4月前
|
开发者 Python
神秘编程世界惊现强大调试法宝!FastAPI 究竟藏着怎样的秘密?带你解决 Web 应用问题大揭秘!
【8月更文挑战第31天】在 Web 应用开发中,调试至关重要,有助于迅速定位并解决问题,确保应用稳定运行。不同于传统框架依赖打印日志和手动检查代码的方式,FastAPI 作为现代 Python Web 框架,提供了内置开发服务器和自动重载功能,极大提升了开发效率。结合 Python 调试器,开发者可通过设置断点来逐步执行代码,直观精确地观察变量值与执行流程,快速定位问题。此外,FastAPI 还提供详细错误信息和日志记录,帮助开发者更高效地解决应用问题,提升应用质量。
36 0