工具篇 之 简单掌握 Chrome 以及 IE DeBug 。。。

前言

今天，老大说，前段时间开发的官网某个页面在 IE 11 下出现了部分问题，需要紧急修复下。

接到任务，内心充满无奈，还是很渴望统一，真正的统一。

扯犊子话不说了，今天本章主要分为俩个部分：

简单讲解有关 Chrome 以及 IE 调试；

简单说下今天遇到的 IE 11 问题。

很多时候，在完成之后才明了，技术并不是唯一方式，好的思维，同样比其他所谓重要很多。

突然想到马爸爸曾经说的话，一流的 idea 三流的执行力和一流的执行力和三流的 idea，你更看重哪儿个？

扪心自问下。

一、如何调试？

说实话，本次纯属自己猜测，也懒得去搜索度娘，不过说实话，谷歌真的是超级好用啊，搜啥就是啥，度娘反而越来越不行咯。

1.1 Chrome 调试

右键 or 双指点击要调试的某个元素，随后选择「检查」：

在调试面板中，选择 Sources，随后找到要调试的 js 文件，打断点方式很 easy，如下图，在要调试的某行数点击下即可。

随后点击进行进入断点开始执行调试：

右侧则是关于调试快捷按钮，例如单步执行、跳过等等。

1.2 IE 11 调试

在 IE 11 同理，选择元素，检查：

找到 debug，找到对应的调试文件，设置断点即可：

随后和 Chrome 一样流程，点击元素开始执行调试即可。

二、今天遇到的 IE 11 兼容性问题以及感概

先附上一段问题代码：

$('.scroll-next a').click(function () {
    var left = parseInt($wrapper.css('left').replace('px', '') );
    if (-left >= itemWidth * ($wrapper.find('.scroll-item').length - 4) || left % itemWidth !== 0) {
        return;
    }
    $wrapper.animate({
        left: left - itemWidth
    });
});

此段代码，Chrome 上执行没问题，IE 11 则会出现问题，我们先来调试下，看看在 Chrome 上和在 IE 11 上都有如何不同？

• Chrome 上第一条获取到的是 0，如下图：

• 而 IE 11 则是：

很明显，在 Chrome 环境下，我们可以正常获取 left 值，0 px，替换 px 为空，最后得出 0，而在 IE 11 上则是 auto，替换转换后则为 NaN，当然有小伙伴会问你怎么知道是 auto 呢？

答案很简单，调试的这句话属于复合句，拆开打印即可看到每一句执行结果。

LZ 一开始想着，既然是 Chrome 可以，IE 不可以，那么肯定又是 IE 11 不兼容某个属性了呗。

朝着这个方向搜索了几乎俩个多小时，无果，内心烦躁一批。生怕老大问下怎么样了，很尴尬。

恰好，到饭点了，想到之前遇到卡壳出去溜达溜达，回来思路通了。无奈下吃饭，脑子里还在想怎么解决，这个兼容问题该如何处理？

饭后，看了好半天 NaN，突然想到，貌似有个方法，可以判断是不是 NaN，如果是的话，直接将 left 初始化下不就好了么？随后，便有了下面的这个判断：

if(isNaN(left)){
    left = 0;
}

简单测试了下，Enmmm，不错，解决了。

回顾下 LZ 解决这个问题的思路，其实很 easy 的解决方案，为什么会脱了俩个多小时？

值得深思。

LZ 虽说是新手，不是很熟悉，但是遇到问题，解决问题的思路却是太过于狭义。鸡大可能又会说我给自己找接口了。

好吧，点滴记录，期待美好未来。