问题定位经验

1、css篇：

前言：当在组件并依赖许多其他css的项目中，样式重叠覆盖而无法得到预期结果的时候自然不会少。

1.1 一般情况下

当遇到样式无法达到预期效果时，首先根据chrome dev tool查看当前元素上有哪些元素，看自己设定的样式是否显示，以排除自己定位错元素导致样式并没在此元素上，一般来说除了居中布局，其他样式如果出现并没被覆盖都会出现相应效果。居中方式，则是自己设定的原因，也和父元素有关系。

1.2 使用组件

在使用组件时，如果达不到效果，可以先对照下组件dome中的样式，看是否与自己的一样。如果可以理解组件的实现方式是最好的，也更容易找到问题所在，否则可以通过某点的实现来看自己样式出了哪个问题。还找不到原因的话，可以使用最小结构实现组件，来看到底是什么原因。

实例分析：

情景：在使用weui的checkbox时候，点击label无法使checkbox选中。 定位过程：排除与weui一致，且weui并没有相关原因，并且没有样式覆盖原因。此时要脱离weui的样式，即自己还原到原生checkbox,之后发现仍然存在问题，确认排除weui作用。可以推测是checkbox结构与项目冲突问题。

2、js篇：

此处不赘述在控制台明显看到bug的情况。

1.1 事件不触发情况

一般打log查看是否真的没有触发，首先确认是否绑错元素，否，再次看被绑元素是否是动态渲染的元素，若是则问题出在此处。若前两者都不是，则需要是因为冒泡到父元素而导致未触发事件。

1.2 偶发性情况

情况描述：切换tab页面空白

分析：

1.多次实现发现何时会稳定复现，获得稳定复现的原因：网络不好时，复现次数较多，去除wifi状态可稳定复现切换tab出现空白页面情况。

2.查看是否成功获得数据，排除未请求接口以及后端原因：通过控制台network查看并确认接口与数据，排除。

3.从tab切换点切入，查看此处触发了什么函数，哪些事件，以及事件执行到什么位置：找到tab切换时执行的rederList函数，并在渲染列表时打断点，发现此处报错，断点并未执行，查看错误是hide()

4.根据错误分析，重新梳理代码逻辑：hide的作用是隐藏运单列表弹框，而在渲染发货单列表时，运单列表并不一定全部渲染完毕，导致定义弹框的元素“undefine”，报错，无法继续执行。

3、辅助工具：

chrome开发者工具

3.1 css篇：

下图所示是打开Elements，主要用于调试查看css样式。

可用于快速定位元素（点击后，再点击元素便可以直接看到右侧出现此元素）。

左侧显示的是整个DOM结构，右侧是某一元素的样式，被覆盖的样式会被划上删除线。

3.2 js篇：

1.console,可查看在js文件中打出的log（ console.log(“XXX”) ）,可以配合断点使用（断点时，可在console上打出需要的数据）。

2.Source,查看文件，并可在文件中打断点，用于断点调试。

3.Network,查看ajax请求数据，点击接口可看到右侧窗口。

下图红框内可用于移动端的网速模拟。

headers主要可以查看接口的完整url，也可以查看传给rd的数据（在最下面），

preview，可以看到后台传开的数据