浏览器中调试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~

相关文章
|
2月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
42 0
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
3月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
|
4月前
|
IDE Linux 开发工具
如何在Linux运行RStudio Server并实现Web浏览器远程访问
如何在Linux运行RStudio Server并实现Web浏览器远程访问
79 0
|
17天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
42 7
|
18天前
|
安全 Linux iOS开发
【热门话题】 Fiddler:一款强大的Web调试代理工具——安装与使用详解
Fiddler是一款强大的Web调试工具,适用于Windows、macOS和Linux,用于捕获、记录和分析HTTP/HTTPS流量。本文详细介绍了Fiddler的安装步骤,包括下载、安装和配置,特别是信任根证书和代理设置。在使用方面,讲解了如何启动/停止捕获流量、查看和管理会话,以及重发请求、编辑请求/响应和清除会话。此外,还探讨了进阶功能,如自定义过滤规则、使用AutoResponder模拟服务器响应、性能分析和统计,以及插件扩展和脚本编写。Fiddler是学习HTTP协议和解决Web问题的得力工具。
43 1
|
2月前
|
Web App开发 iOS开发
Web 浏览器
Web 浏览器。
17 3
|
2月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
57 0
|
2月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
3月前
|
编解码 缓存 前端开发
Web浏览器的兼容性测试需要考虑哪些测试点?
Web浏览器的兼容性测试需要考虑哪些测试点?