前端现网问题定位/调试

本文全面介绍前端调试工具与方法，包括 Chrome DevTools、Safari Inspector、Vue/React DevTools、WebDebugX 等，结合实战案例总结各自优缺点，并给出跨平台前端调试的最佳实践方案。

解决bug的方法

外边界塌陷，是指两个并列的拥有padding的元素会使交界处的padding重叠，两个元素内容的间距变为较大者的padding值而非两者相加。

最近身边学习 Vue 的人也越来越多了，大家都有很多的疑问，为什么前端要用框架、Vue 做了些什么、要怎么上手，等等。距离上一次写 Vue 也过去三年了，是时候再把这三年自己的理解再整理进去了。由于这个系列主要是希望写给可能前端掌握也不深的人，所以会铺垫一些自己认为需要的内容，本节先来讲讲入门前端，作为铺垫，来理解 Vue 这个框架吧。 前端页面解析 页面组成我们打开一个前端项目，经常会看到很多不...

相对于有定位的父元素或者祖先元素 如果都没有就相对于body。用途：一个东西盖到一个东西上面(父元素用相对 子元素用绝对）解决方式:给图片设置vertial-align：middle。问题描述：div（未设置高度）包裹图片 会出现默认空隙。相对于浏览器窗口 脱离文档流。用途·：返回顶部按钮。相对于元素原来的位置。

chrome的全局搜索快捷键 常用 文件内搜索 ctrl+f 使用快捷键 ctrl+shift+f， 就会进入到全局搜索模式 打开文件：ctrl+o 打开DevTools 你可以通过以下任何一种方式来访问DevTools： 打开浏览器右上角的Chrome菜单 Chrome Menu，然后选择“更多工具”–“开发者工具”。 在页面任何元素处点击右键，然后选择“审查元素”。 Windows / Lin...

文章目录前言一、一、一、一、一、总结 前言 对于很多新人来说，很多时候我们心中都十万个为什么，为什么最终显示的不是预期的效果，往往一找就是大半天，落了个头晕脑胀还解决不了问题，往往这时候来了个大佬，看他一波操作，行云流水的就解决了。那么，这里引出了一个很关键的问题，为什么他一下子就解决了，找到问题根源的所在，而你迟迟都定位不出？授人以鱼不如授人以渔，解决一个问题，不如学会解决问题的办法！ 一、 第一点，虽然出现的少，但很重要的一点，有时候往往被我们忽略的的。那就是确保当前你看到的页面你改动的代..

断点调试是前端开发的核心技能。快速打开 DevTools 并导航到 Sources 面板。设置和操作断点，步进分析代码。精准定位语法、逻辑和异步错误。使用高级工具如条件断点和异常捕获。从简单开始：先在小函数测试，再扩展到复杂项目。定期练习：每天调试一个新问题，巩固技能。结合其他工具：如使用 Console 输出辅助，但以断点为主。调试不仅能修复 bug，更能提升代码质量。现在，打开你的项目，尝试设置断点吧！遇到问题，回顾这些步骤，逐步成为调试高手。

愿你的CSS选择器永不打架，JavaScript闭包永远懂事，console.log永不迷路——但万一真有bug，请相信那一定是浏览器的锅！（顺便祈祷你发量永远浓密）• 铰链区域热区标注（针对折叠屏）• 多分辨率设备实时渲染对比。• 横竖屏媒体查询断点预演。Flex/Grid计算。

本文转载自：https://www.cnblogs.com/nickjiang 做测试的小伙伴可能用过httpwatch，firebug，fiddler，charles等抓包（数据包）工具，但实际上除了这些还有一个简单实用并的抓包工具，那就是浏览器的F12调试器。 httpwatch，firebug都是浏览器的插件，需要额外下载，fiddler，charles也需要额外下载安装包另行安装，但是...

　　一直以来，前端的线上问题很难定位，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 当然，这些问题并非不能克服，让我们来一起看看如何去定位线上的问题吧。 　　所谓，工欲善其事必先利其器，你不能撸起袖子蛮干，所以，我们需要一个工具。我们曾经尝试用过很多监控工具去统计这些错误，比如，听云、OneApm、...

调试工具的面板有很多，先掌握做常用的4个元素(Element)控制台（Console）源代码（Sources）网络（Network）掌握Chrome调试工具的基本使用认识常见报错的种类能够在报错中提取关键信息能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

返回桌面，win+R打开cmd面板，输入 ipconfig 回车查看本机ip地址。项目build完成之后，首先需要安装phpstudy_pro，官网。项目开发完成之后，想在本地预览，使用phpstudy快速部署。在ip地址后拼接 /打包文件名称 即可预览项目。到达安装位置之后，返回上一级，找到WWW文件。将打包好的项目文件丢入WWW文件中。找到IPv4地址，复制到浏览器打开。打开小皮，启动Nginx。

1,本博客是使用谷歌浏览器，首先按F12调出调试后台，点击箭头位置 2，点击箭头标志后再去页面中选择需要寻找的内容，将选中的内容进行复制 3，博主使用的是Myeclipse,进入项目中点击 CTRL + H ，点击File Search 4,点击找到的文件

1.有问题首先看控制台，看控制台报错信息，一定要搞懂报错内容，然后根据报错内容去定位。2.如果没有报错，就看notework，看下自己传的参数有没有问题，后台返回的数据有没有问题。2.用debugger或者写日志来定位。3.自己写的流程 逻辑 或者某个单词可能有问题。4.可能是其他地方影响到了或者是组件框架的问题。5.排除法：可以一段一段代码注释来筛选。5.以上都没有找到就有可能是后台的问题，直接...

1、系统开发上线前，就要预设测试账号的功能，针对于现网测试账号，在系统中特别打印出日志，当遇到客户功能，    不可用的情况，可以线上模拟真实的情况。 2、最近是否有对代码进行更新，一般一个系统出现异常，往往最有可能是代码有更新，未考虑     周全，影响了其他功能。 3、系统部署方式是否有更改，比如WEB服务器的参数，数据库参数，尤其是超时，连接数等参数更改 4、对比测试，代码一样，可

总之，在前端开发中，定位到发生错误的元素需要结合多种方法和工具进行分析和定位，通过多次尝试和调试，找到准确的问题所在，并采取相应的措施进行解决。

1、目前一直在用css和xpath定位web元素位置，具体的语法参考这里： https://www.w3school.com.cn/cssref/css_selectors.asp https://www.w3school.com.cn/xpath/xpath_syntax.asp 2、控制台调试：

1、前置条件1）需要的知识熟透系统业务、团队成员情况；熟悉使用F12或抓包工具；了解HTTP/HTTPS协议；了解系统的架构，数据走向；2）定位前的操作保存bug产生的记录；排除低级问题；包括网络问题、数据问题（脏数据2、定位问题思路和步骤查看页面表现 > 查看状态码 > 接口的请求和返回以及js执行有无报错 > 查看服务器日志 > 配置问题 > 经验或其他1）查看页面表现用户层面问题：用户自己的环境问题或者操作问题。如环境不通或者操作不正确等。