有时候，我们在调试页面时，会直接右键点击“显示页面源代码”，里面会有整个布局的所有代码，但是如果我们只想看一部分ui的代码，比如只看下面的弹框代码，那该如何实现呢？下面来讲解下：
首先在弹框的区域处，右键“查看框架源代码”：
然后会打开该页面的源代码，格式：view-source：ip:port/页面名称?参数
把前面的view-source去掉，直接就显示弹框里面内容的ui了，调试起来更加简单了。
这个小技巧，可以帮助我们更加的专注于要调试的内容，也可以让我们知道页面的html文件名等。
前端页面调试小技巧（谷歌浏览器）
2023-11-08
38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
前端页面调试小技巧（谷歌浏览器）
目录
相关文章
|
1月前
|
前端开发
调试前端时，在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了，但是接口出问题，想修改参数再调用一次，一般是用apiPost工具把接口复制，再加上token和参数，但是这样非常的效率比较低。
42
0
0
|
3月前
|
前端开发
Java
C++
|
4月前
|
Web App开发
JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
308
0
0
|
4月前
|
Web App开发
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧，敲击讨厌滴啦，怎么去掉介个样式尼
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧，敲击讨厌滴啦，怎么去掉介个样式尼
62
0
0
|
14天前
|
监控
前端开发
JavaScript
如何使用浏览器调试前端代码？
【4月更文挑战第11天】前端开发中，浏览器调试是关键技能，能提升代码质量。本文介绍了如何使用浏览器的调试工具：1) 打开调试窗口（F12或右键检查）；2) Elements标签页检查DOM结构和样式；3) Console调试JavaScript，查看日志和错误信息；4) Sources设置断点调试JS文件；5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题，提高开发效率。
38
7
7
|
4月前
|
Web App开发
Linux
Android开发
Chrome谷歌浏览器的WeChat微信模拟器，既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器，既可以设置模拟很多型号的手机设备Mozilla
268
0
0
|
1月前
|
前端开发
JavaScript
程序员
|
1月前
|
SQL
存储
JavaScript
|
2月前
|
消息中间件
JavaScript
前端开发
|
2月前
|
缓存
前端开发
JavaScript
热门文章
最新文章
1
构建高效响应式Web界面：现代前端框架的比较
2
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
3
前端开发中的跨域问题及解决方案
4
前端最常见的JS面试题大全
5
前端代码整洁与规范之CSS篇
6
ECS负载问题之前端包加载很慢如何解决
7
使用机器学习优化前端用户体验
8
探索前端开发中的新趋势：WebAssembly 技术应用与展望
9
layui：从崛起到蜕变，前端框架的华丽篇章
10
Web 前端开发中的最佳实践
1
调试前端时，在浏览器上修改参数并重新调用接口
42
2
《手把手教你》系列基础篇之（四）-java+ selenium自动化测试- 启动三大浏览器（下）基于Maven（详细教程）
66
3
【问题篇】浏览器get请求带token
56
4
Rtsp转Flv在浏览器中播放
100
5
分析网站架构：浏览器插件
45
6
《手把手教你》系列基础篇之（三）-java+ selenium自动化测试- 启动三大浏览器（上）（详细教程）
44
7
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
40
8
微信外部浏览器或短信链接唤起微信小程序的解决方案
144
9
vue-cli 如何让Eslint 报错在浏览器控制台输出
32
10
js阻止浏览器默认事件和防止事件传播事件
21