前端现网问题定位/调试

最新推荐文章于 2024-06-11 16:35:54 发布
最新推荐文章于 2024-06-11 16:35:54 发布
阅读量304 收藏
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sun_qqq/article/details/137106304
版权
本文介绍了如何在Chrome浏览器中使用F12开发者工具进行基础调试，包括全局搜索定位问题文件、通过格式化代码按钮查看资源、以及设置断点进行逐行调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、chrome打开F12调试模式
2、全局搜索(ctrl+shift+f)关键词，定位到问题文件。或者Sources板块手动找到资源文件

3、找有个图片是大括号的按钮({})，格式化代码。

4、搜索文件中的相关关键词，定位到代码位置。

5、打断点，调试

前端性能优化 | 如何快速定位代码bug（附排查详细步骤）
Sharon0408的博客
12-07 2799
分享人：Mark Wu（ 吴银波 ）云智慧前端工程师，致力于云智慧大屏产品及ITSM、DOMM、DOEM等产品线定制化开发，拥有丰富的前端性能优化和开源项目经验。 背景介绍： 不知道你有没有碰到过这些情况： 被通知下周一前一定要解决某个bug，现在已经是周五下午了； 上线封版前一天被通知客户机器性能不行，打不开某个页面，当时已经是晚上10点了； 晚上2点接到电话，某个系统现在运行不起来，但是明天要给客户领导演示，然后你还没带电脑回家... 假如你也有这些情况，那么恭喜你.
怎么调试前端代码？
weixin_59519449的博客
04-09 2862
前言：调试技巧，在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧，必定能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效率，掌握前端开发调试技巧尤为重要。 目录 1、骨灰级调试大师Alert 2、新一代调试王者Console 3、JS断点调试 4、DOM断点调试 5、XHR Breakpoints 6、Event Listener Breakpoints 本文将一一
前端问题定位
weixin_34198762的博客
12-08 288
1.有问题首先看控制台，看控制台报错信息，一定要搞懂报错内容，然后根据报错内容去定位。2.如果没有报错，就看notework，看下自己传的参数有没有问题，后台返回的数据有没有问题。2.用debugger或者写日志来定位。3.自己写的流程 逻辑 或者某个单词可能有问题。4.可能是其他地方影响到了或者是组件框架的问题。5.排除法：可以一段一段代码注释来筛选。5.以上都没有找到就有可能是后台的问题，直接...
前端【定位】
weixin_53271010的博客
09-20 198
相对于有定位的父元素或者祖先元素 如果都没有就相对于body。用途：一个东西盖到一个东西上面(父元素用相对 子元素用绝对）解决方式:给图片设置vertial-align：middle。问题描述：div（未设置高度）包裹图片 会出现默认空隙。相对于浏览器窗口 脱离文档流。用途·：返回顶部按钮。相对于元素原来的位置。
前端定位问题的简单简述
mumu1998的博客
07-22 562
最近开始学前端 遇到个定位问题花了我很长时间才搞懂.......... 有些小伙伴可能也和我一样不知道啥时用相对定位啥时用绝对定位..........（嘿嘿，可能就我不知道） 没关系我用我的理解简述下下 前提要知道什么是文档流 文档流是文档中可显示对象在排列时所占用的位置。 知道文档流之后再去想定位问题 @* *@ 相对定位：relative（就是相对于它本身所在文档流的位置进...
前端bug快速定位 - 平稳运行的前端系统，只有某个人那里有问题
loulanyijian的专栏
06-25 229
大家应对都会遇到一个经典的场景，就是我们做的网站，在所有人的电脑/手机上都运行的好好，结果就某一个同事那里运行会有问题 如下list是问题定位的方法，基本是有顺序的查看他使用的链接，是不是完整的链接，有没有url上缺少必要参数 或者是不是过期的链接、即将要下掉的域名先切换个通用的测试账号试一下，看看有没有问题 查看他当前的用户，是否是、是否是的用户等，然后做相应的处理，比如赋予必要的权限、协助接触被风控这样的话，可以甄别是系统还是浏览器的原因接上一个，如果定位到是浏览器的原因的话，先清除浏览器缓存，然后重启
基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题
小结巴巴的博客
12-04 1071
背景   　　在这越来越发达的网络时代，web应用也是越来越复杂，尤其是前端的开发，也是越来越受重视。 　　所以在我们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保 应用能在生产上没有事故。 　　但是事以愿违，很多时候我们都会接受的客户的一些线上问题，这些问题有时候可能你是自己开发的原因本身存 在的问题，这样的问题一般能够在测试环...
Windows平台下的网络调试助手
03-08
2. **协议解析**：网络调试助手能解析捕获到的数据包，并以直观的方式展示其内容，如显示HTTP请求头、响应码等，有助于快速定位问题。 3. **过滤与搜索**：通过设定过滤规则，可以快速筛选出特定类型或特定来源的...
前端自动化测试工具
IT赶路人的博客
07-06 2877
掌握前端知识，一个必不可少的学习就是掌握前端工具。前端工具比较多，以下我们一起来看看几款常见的工具：Firebug、FirePath以及WebDriver Element Locator。 Firebug&FirePath工具 对于做前端开发的同学，Firebug一定有所了解了。Firebug是浏览器中，一个开发类的插件。看看Firebug的详细介绍： Firebug是网页浏览器Mozilla Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看、编辑.
12个前端必会 H5 问题及解决方法
qianduan666a的博客
08-14 1027
前言 作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 问题 下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟
前端开发中，定位bug的几种常用方法
qq_45796592的博客
05-10 2976
解决bug的方法
Web前端最全提升前端线上问题发现率的方法(1)，太真实了
2401_84447043的博客
05-09 385
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分析&思考和业务开发对接过程发现，在监控的认知上和目标上还存在比较大的差距，大部分业务只是接入了监控 SDK ，订阅了一些基础指标，但是实际上大部分【前端问题】都很难通过常规的技术指标发现。基于会引发线上问题的一些场景，我们在前端链路和前端监控指标做了下简单的分析。▐链路分析。
web网页测试bug定位详细步骤
最新发布
okcross0的博客
06-11 1289
1、前置条件1）需要的知识熟透系统业务、团队成员情况；熟悉使用F12或抓包工具；了解HTTP/HTTPS协议；了解系统的架构，数据走向；2）定位前的操作保存bug产生的记录；排除低级问题；包括网络问题、数据问题（脏数据2、定位问题思路和步骤查看页面表现 > 查看状态码 > 接口的请求和返回以及js执行有无报错 > 查看服务器日志 > 配置问题 > 经验或其他1）查看页面表现用户层面问题：用户自己的环境问题或者操作问题。如环境不通或者操作不正确等。
web页面元素定位和控制台调试
cwb_真水无香
12-10 8388
1、目前一直在用css和xpath定位web元素位置，具体的语法参考这里： https://www.w3school.com.cn/cssref/css_selectors.asp https://www.w3school.com.cn/xpath/xpath_syntax.asp 2、控制台调试：
浏览器调试技巧
winney07的博客
07-21 327
有时候在控制台打印出来的变量值，想复制到其他地方。简单的变量，直接选中复制即可。但是对于对象数组这样的变量，选中复制粘贴之后，不是想要的效果。如果想复制对象数组这样的变量值，使用。（前提是操作系统中使用 Ctrl + Shift + F 快捷键来切换输入法的字体，如果不是，忽略）这效果类似于在代码编辑器中，对项目进行全局搜索一样。但是有时在查看学习和了解别人网站时，可以使用这种全局搜索查找。，输入法会切换到繁体字，如果不小心切换到繁体字状态，可以再按一次。原创不易，转载请注明本文出处及原文链接。
使用chrome浏览器调试时的搜索技巧
PhilsphyPrgram的博客
11-16 5879
前端的chrome调试技巧
前端学习笔记-3-定位的一些小问题
2301_80045499的博客
02-12 906
外边界塌陷，是指两个并列的拥有padding的元素会使交界处的padding重叠，两个元素内容的间距变为较大者的padding值而非两者相加。
vue 浏览器调试 样式如何定位样式_如何理解前端和Vue
weixin_39725873的博客
11-21 1109
最近身边学习 Vue 的人也越来越多了，大家都有很多的疑问，为什么前端要用框架、Vue 做了些什么、要怎么上手，等等。距离上一次写 Vue 也过去三年了，是时候再把这三年自己的理解再整理进去了。由于这个系列主要是希望写给可能前端掌握也不深的人，所以会铺垫一些自己认为需要的内容，本节先来讲讲入门前端，作为铺垫，来理解 Vue 这个框架吧。 前端页面解析 页面组成我们打开一个前端项目，经常会看到很多不...
开发调试秘籍--前端Debugger实战
黑马程序员官方博客
07-03 1427
调试工具的面板有很多，先掌握做常用的4个元素(Element)控制台（Console）源代码（Sources）网络（Network）掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法，准确定位代码Bug位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sun_qqq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值