【前端面试题】—19道有关前端测试的面试题
虽然工作中有专门的测试人员（QA工程师）帮我们实现对代码的测试，但是为保证开发的代码质量，我们还是要进行单测、自测。
测试部分的面试题主要考察应试者对前端测试的了解，主要涉及单测和自测部分，考察应试者平时都是如何做测试的，都用过哪些测试工具等。
1、什么是mock测试？
mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，创建一个虛拟的对象来测试，以便完成测试方法。
2、什么是冒烟测试（ smoke test）？
冒烟测试源自硬件行业，对一个硬件或者硬件组件改动后，直接给设备加电，看看设备会不会冒烟。如果没冒烟，就表示待测组件通过了测试。
在软件开发过程中，一直有高内聚、低耦合这样的说法，各个功能模块之间的耦合还是存在的。因此，一个功能的改动还是会影响到其他功能模块。如果在开发人员修复了先前测试中发现的Bug后，想知道这个Bug的修复是否会影响到其他功能模块，就需要做冒烟测试。
3、平时工作中怎样进行数据交互？如果后台没有提供数据，怎样进行开发？mock数据与后台返回的格式不同怎么办？
由后台编写接口文档、提供数据接口，由前台通过Ajax访问实现数据交互在没有数据的情况下，向后端索要一份静态数据，或者自己模拟一份mock数据。
当返回数据的格式不统一时，编写映射文件对数据进行映射。
4、在iOS模拟器中，如何进行刷新？
选择模拟器中的 Hardware→ Keyboard→ Connect Hardware Keyboard即可
5、如何在 Chrome控制台中打开 paint flashing？
打开开发者工具，按键盘上的Esc键打开控制台面板，选择 rendering标签栏，即可看到 paint flashing选项。
6、Chrome开发者工具中，常用的面板有哪几个？
有以下几个
-
Element：主要用来调试网页中的HTML标签代码和CSS样式代码。
-
Network：查看网页的HTTP通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等。
-
Source：查看 JavaScript文件，调试 JavaScript代码。
-
Timeline：查看 JavaScript的执行时间、页面元素渲染时间等。
-
Profiles：查看网页的性能，比如CPU和内存消耗。
-
Resources：查看加载的各种资源文件，如 JavaScript文件、CSS文件、图片等。
Audits：分析当前网页，快速地分析出哪些资源被使用、哪些资源没有被使用，然后提出建议。
Console：查看错误信息，打印调试信息，调试 JavaScript代码，查看 JavaScript API。
7、如何调试 JavaScript代码？
调试方式如下
（1） Javascript断点调试。
断点可以让程序在需要的地方中断，从而方便程序员分析。也可以在一次调试中设置断点，下一次只须让程序自动运行到设置断点的位置，便可在上次设置断点的位置中断，这极大地方便了调试，同时节省了时间。
JavaScript断点调试，即是在浏览器开发者工具中为 JavaScript代码添加断点，让JavaScript执行到某一特定位置停住，方便开发者对该处代码段进行分析和调试。
（2） debugger断点调试。
通过在代码中添加“ debugger”语句，当代码执行到该语句的时候就会自动插入断点。
（3）DOM断点调试DOM断点就是在DOM元素上添加断点，进而达到调试的目的
8、如何进行响应式测试？
响应式测试特别简单，通过改变视窗大小（也就是缩放浏览器）即可测试。当然，当在CSS中设置 Media Queries判断条件时要使用max- width才行，如果使用max- device- width则会根据设备的屏幕尺寸来判断。
9、如何用 Chrome模拟设备屏幕尺寸？
如果需要测试某种明确的机型， Chrome新版的 Emulation就可以派上用场了。
如果 Emulation面板需要模拟地理位置、加速计等功能，打开 DevTools界面后按下Esc键即可打开分裂视图。打开 DevTools界面之后，单击“手机图标”即可进入 Chrome手机模拟器。
10、如何进行 Android虚拟机测试？
在计算机上安装 Android虛拟机，就可以用虚拟机打开进行测试，例如以下虚拟机。
-
Genymotion
Genymotion是一个优秀的 Android虛拟机。因为它基于VirtualBox内核，所以要先安装VirtualBox，然后注册账号 Genymotion，可以免费使用，但是功能有限制。
-
Parallels
Parallels是基于Mac平台的虚拟机，使用它创建虛拟机的时候，可以直接下载Android系统并安装。
11、如何进行 Android真机调试？
测试机安装 Chrome for Android后才可以使用 Chrome远程调试这项功能。
首先，用数据线将 Android测试机连接到计算机上，打开测试机上面“开发者选项”中的“USB调试”功能。在 Android4.2+系统上“开发者选项”默认是隐藏的，所以需要先开启“开发者选项”。
然后，在桌面版 Chrome中打开 chrome://inspect即可查找你的设备，在设备上的Chrome中打开网页即可。接下来，就可以用桌面版 Chrome Devtools调试移动设备上的页面了。
此外，在本地用 Node. js或者其他语言开启一个本地服务器，通过端口转接让移动设备直接访问本机IP地址上的页面，再配合 LiveReload、 Browser Sync之类的工具，自动刷新。
12、你使用过 Weinre调试工具吗？
Weinre是一个简单、好用的调试工具。它会在本地创建一个监听服务器，并提供一个 JavaScript程序，你只用在需要测试的页面中加载这段 JavaScript程序，就可以被Weinre监听到，在 Inspect面板中调试这个页面。
13、你使用过 OS Simulator调试工具吗？
ios Simulator是 Xcode开发工具内置的ioS模拟器，该功能仅能在Mac系统下使用。
14、如何对OS设备进行真机调试？
首先需要在 iPhone等设备上设置一下 Safari浏览器，开启调试功能。然后，使用数据线连接计算机，在设备上用 Safari浏览器打开需要调试的页面。接下来，在桌面版的 Safari开发选项中即可看到此页面，并进行调试但是要调试本地网站，你可能要将手机与计算机连在一个局域网内，然后输入局域网IP地址进行调试。
15、如何使用MIHToo进行远程调试？
MIHTool是一个App，可以直接安装到你的iOS设备里，然后内置一个简单的浏览器就可以打开测试页面。当它开启时，它会自动向页面中插入 Weinre的 JavaScript程序，并告知 Weinre控制台URL等信息，让你可以访问并进行调试该页面。它还提供了一个公共的 Weinre调试服务，生成对应的链接，打开即可调试。
16、如何对IE浏览器进行网页调试？
可以通过以下工具进行调试。
SuperPreview，主要用于HTML代码、CSS代码的调试和各个浏览器（目前只能针对IE6~IE8）的页面呈现测试。
Internet Explorer Collection，主要用于 Internet Explorer浏览器（IEl~IE8）各个版本的页面呈现测试。
Developer Toolbar，主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE WebDeveloper，主要用于HTML代码、CSS代码和 JavaScript代码的调试。
IE Web Developer可以让你检查和编辑 HTML DOM，显示错误信息、日志信息，显网站源代码，监视DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美，甚至有些功能还强于 Firebug。
IETester，主要用于 Internet Explorer浏览器各个版本的页面呈现测试。
VS2008，主要用于 JavaScript代码的调试。
DebugBar，主要用于HTML代码、CSS代码和 JavaScript代码的调试。
17、你知道哪些开发工具？
开发工具一般分为两种类型：文本编辑器和集成开发环境（IDE）
常用的文本编辑器有 Sublime text、 Notepad++、 EditPlus等。
常用的IDE有 WebStorm、 Intellij IDEA、 Eclipse等。
18、请介绍一下YSlow。
首先， YSlow是一个工具，也可以认为它是一个插件，它是基于 Mozilla Firefox上 Firebug插件的一个插件。
它出现的主要目的就是检测页面的性能。它让用户可以就近取得所需的内容，解决网络拥挤的状况，提髙用户访问网站的响应速度。其次，雅虎在 Etags的配置上也有独特之处，它声明网页对象过期。
也就是说，当用户从服务器取数据的时候，如果文件变化了，就给他反馈新的文件。如果文件没有变化，只须告诉客户端没有变化即可，不必再把文件取回来，这样就节省了大量的网络带宽和资源。
另外只要将那些在加载过程中要执行的脚本放到底部，就可以实现最大数量的并行下载。
19、如何让 WebStrom忽略 node_modules的索引？
WebStrom在打开一个项目的时候会有一个索引过程。如果计算机配置不高，打开一个带有 node_modules文件夹的项目，那简直就是一场“灾难”。为了提高打开速度，避免每次“灾难”的重现，可以在菜单栏中选择File→ Setting→ Editor→ File types→ Ignore files and folders。
在 Ignore files and folders 选项最后加上 node_modules并保存就可以了，然后重启WebStorm。