雖然工作中有專門的測試人員（QA工程師）幫我們實(shí)現(xiàn)對代碼的測試，但是為保證開發(fā)的代碼質(zhì)量，我們還是要進(jìn)行單測、自測。
測試部分的面試題主要考察應(yīng)試者對前端測試的了解，主要涉及單測和自測部分，考察應(yīng)試者平時(shí)都是如何做測試的，都用過哪些測試工具等。
1、什么是mock測試？
mock測試就是在測試過程中，對于某些不容易構(gòu)造或者不容易獲取的對象，創(chuàng)建一個(gè)虛擬的對象來測試，以便完成測試方法。
2、什么是冒煙測試（ smoke test）？
冒煙測試源自硬件行業(yè)，對一個(gè)硬件或者硬件組件改動后，直接給設(shè)備加電，看看設(shè)備會不會冒煙。如果沒冒煙，就表示待測組件通過了測試。
在軟件開發(fā)過程中，一直有高內(nèi)聚、低耦合這樣的說法，各個(gè)功能模塊之間的耦合還是存在的。因此，一個(gè)功能的改動還是會影響到其他功能模塊。如果在開發(fā)人員修復(fù)了先前測試中發(fā)現(xiàn)的Bug后，想知道這個(gè)Bug的修復(fù)是否會影響到其他功能模塊，就需要做冒煙測試。
3、平時(shí)工作中怎樣進(jìn)行數(shù)據(jù)交互？如果后臺沒有提供數(shù)據(jù)，怎樣進(jìn)行開發(fā)？mock數(shù)據(jù)與后臺返回的格式不同怎么辦？
由后臺編寫接口文檔、提供數(shù)據(jù)接口，由前臺通過Ajax訪問實(shí)現(xiàn)數(shù)據(jù)交互在沒有數(shù)據(jù)的情況下，向后端索要一份靜態(tài)數(shù)據(jù)，或者自己模擬一份mock數(shù)據(jù)。
當(dāng)返回?cái)?shù)據(jù)的格式不統(tǒng)一時(shí)，編寫映射文件對數(shù)據(jù)進(jìn)行映射。
4、在iOS模擬器中，如何進(jìn)行刷新？
選擇模擬器中的 Hardware→ Keyboard→ Connect Hardware Keyboard即可
5、如何在 Chrome控制臺中打開 paint flashing？
打開開發(fā)者工具，按鍵盤上的Esc鍵打開控制臺面板，選擇 rendering標(biāo)簽欄，即可看到 paint flashing選項(xiàng)。
6、Chrome開發(fā)者工具中，常用的面板有哪幾個(gè)？
有以下幾個(gè)
- Element：主要用來調(diào)試網(wǎng)頁中的HTML標(biāo)簽代碼和CSS樣式代碼。
- Network：查看網(wǎng)頁的HTTP通信情況，包括Method、Type、Timeline（網(wǎng)絡(luò)請求的時(shí)間響應(yīng)情況）等。
- Source：查看 JavaScript文件，調(diào)試 JavaScript代碼。
- Timeline：查看 JavaScript的執(zhí)行時(shí)間、頁面元素渲染時(shí)間等。
- Profiles：查看網(wǎng)頁的性能，比如CPU和內(nèi)存消耗。
- Resources：查看加載的各種資源文件，如 JavaScript文件、CSS文件、圖片等。
Audits：分析當(dāng)前網(wǎng)頁，快速地分析出哪些資源被使用、哪些資源沒有被使用，然后提出建議。Console：查看錯(cuò)誤信息，打印調(diào)試信息，調(diào)試 JavaScript代碼，查看 JavaScript API。7、如何調(diào)試 JavaScript代碼？（1） Javascript斷點(diǎn)調(diào)試。斷點(diǎn)可以讓程序在需要的地方中斷，從而方便程序員分析。也可以在一次調(diào)試中設(shè)置斷點(diǎn)，下一次只須讓程序自動運(yùn)行到設(shè)置斷點(diǎn)的位置，便可在上次設(shè)置斷點(diǎn)的位置中斷，這極大地方便了調(diào)試，同時(shí)節(jié)省了時(shí)間。JavaScript斷點(diǎn)調(diào)試，即是在瀏覽器開發(fā)者工具中為 JavaScript代碼添加斷點(diǎn)，讓JavaScript執(zhí)行到某一特定位置停住，方便開發(fā)者對該處代碼段進(jìn)行分析和調(diào)試。（2） debugger斷點(diǎn)調(diào)試。通過在代碼中添加“ debugger”語句，當(dāng)代碼執(zhí)行到該語句的時(shí)候就會自動插入斷點(diǎn)。（3）DOM斷點(diǎn)調(diào)試DOM斷點(diǎn)就是在DOM元素上添加斷點(diǎn)，進(jìn)而達(dá)到調(diào)試的目的響應(yīng)式測試特別簡單，通過改變視窗大小（也就是縮放瀏覽器）即可測試。當(dāng)然，當(dāng)在CSS中設(shè)置 Media Queries判斷條件時(shí)要使用max- width才行，如果使用max- device- width則會根據(jù)設(shè)備的屏幕尺寸來判斷。9、如何用 Chrome模擬設(shè)備屏幕尺寸？如果需要測試某種明確的機(jī)型， Chrome新版的 Emulation就可以派上用場了。如果 Emulation面板需要模擬地理位置、加速計(jì)等功能，打開 DevTools界面后按下Esc鍵即可打開分裂視圖。打開 DevTools界面之后，單擊“手機(jī)圖標(biāo)”即可進(jìn)入 Chrome手機(jī)模擬器。10、如何進(jìn)行 Android虛擬機(jī)測試？在計(jì)算機(jī)上安裝 Android虛擬機(jī)，就可以用虛擬機(jī)打開進(jìn)行測試，例如以下虛擬機(jī)。Genymotion是一個(gè)優(yōu)秀的 Android虛擬機(jī)。因?yàn)樗赩irtualBox內(nèi)核，所以要先安裝VirtualBox，然后注冊賬號 Genymotion，可以免費(fèi)使用，但是功能有限制。Parallels是基于Mac平臺的虛擬機(jī)，使用它創(chuàng)建虛擬機(jī)的時(shí)候，可以直接下載Android系統(tǒng)并安裝。11、如何進(jìn)行 Android真機(jī)調(diào)試？測試機(jī)安裝 Chrome for Android后才可以使用 Chrome遠(yuǎn)程調(diào)試這項(xiàng)功能。首先，用數(shù)據(jù)線將 Android測試機(jī)連接到計(jì)算機(jī)上，打開測試機(jī)上面“開發(fā)者選項(xiàng)”中的“USB調(diào)試”功能。在 Android4.2+系統(tǒng)上“開發(fā)者選項(xiàng)”默認(rèn)是隱藏的，所以需要先開啟“開發(fā)者選項(xiàng)”。然后，在桌面版 Chrome中打開 chrome://inspect即可查找你的設(shè)備，在設(shè)備上的Chrome中打開網(wǎng)頁即可。接下來，就可以用桌面版 Chrome Devtools調(diào)試移動設(shè)備上的頁面了。此外，在本地用 Node. js或者其他語言開啟一個(gè)本地服務(wù)器，通過端口轉(zhuǎn)接讓移動設(shè)備直接訪問本機(jī)IP地址上的頁面，再配合 LiveReload、 Browser Sync之類的工具，自動刷新。12、你使用過 Weinre調(diào)試工具嗎？Weinre是一個(gè)簡單、好用的調(diào)試工具。它會在本地創(chuàng)建一個(gè)監(jiān)聽服務(wù)器，并提供一個(gè) JavaScript程序，你只用在需要測試的頁面中加載這段 JavaScript程序，就可以被Weinre監(jiān)聽到，在 Inspect面板中調(diào)試這個(gè)頁面。13、你使用過 OS Simulator調(diào)試工具嗎？ios Simulator是 Xcode開發(fā)工具內(nèi)置的ioS模擬器，該功能僅能在Mac系統(tǒng)下使用。14、如何對OS設(shè)備進(jìn)行真機(jī)調(diào)試？首先需要在 iPhone等設(shè)備上設(shè)置一下 Safari瀏覽器，開啟調(diào)試功能。然后，使用數(shù)據(jù)線連接計(jì)算機(jī)，在設(shè)備上用 Safari瀏覽器打開需要調(diào)試的頁面。接下來，在桌面版的 Safari開發(fā)選項(xiàng)中即可看到此頁面，并進(jìn)行調(diào)試但是要調(diào)試本地網(wǎng)站，你可能要將手機(jī)與計(jì)算機(jī)連在一個(gè)局域網(wǎng)內(nèi)，然后輸入局域網(wǎng)IP地址進(jìn)行調(diào)試。15、如何使用MIHToo進(jìn)行遠(yuǎn)程調(diào)試？MIHTool是一個(gè)App，可以直接安裝到你的iOS設(shè)備里，然后內(nèi)置一個(gè)簡單的瀏覽器就可以打開測試頁面。當(dāng)它開啟時(shí)，它會自動向頁面中插入 Weinre的 JavaScript程序，并告知 Weinre控制臺URL等信息，讓你可以訪問并進(jìn)行調(diào)試該頁面。它還提供了一個(gè)公共的 Weinre調(diào)試服務(wù)，生成對應(yīng)的鏈接，打開即可調(diào)試。16、如何對IE瀏覽器進(jìn)行網(wǎng)頁調(diào)試？SuperPreview，主要用于HTML代碼、CSS代碼的調(diào)試和各個(gè)瀏覽器（目前只能針對IE6~IE8）的頁面呈現(xiàn)測試。Internet Explorer Collection，主要用于 Internet Explorer瀏覽器（IEl~IE8）各個(gè)版本的頁面呈現(xiàn)測試。Developer Toolbar，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調(diào)試。IE WebDeveloper，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調(diào)試。IE Web Developer可以讓你檢查和編輯 HTML DOM，顯示錯(cuò)誤信息、日志信息，顯網(wǎng)站源代碼，監(jiān)視DHTML事件和HTTP流量。它的功能可以和火狐中的Firebug相媲美，甚至有些功能還強(qiáng)于 Firebug。 IETester，主要用于 Internet Explorer瀏覽器各個(gè)版本的頁面呈現(xiàn)測試。VS2008，主要用于 JavaScript代碼的調(diào)試。DebugBar，主要用于HTML代碼、CSS代碼和 JavaScript代碼的調(diào)試。開發(fā)工具一般分為兩種類型：文本編輯器和集成開發(fā)環(huán)境（IDE）常用的文本編輯器有 Sublime text、 Notepad++、 EditPlus等。常用的IDE有 WebStorm、 Intellij IDEA、 Eclipse等。首先， YSlow是一個(gè)工具，也可以認(rèn)為它是一個(gè)插件，它是基于 Mozilla Firefox上 Firebug插件的一個(gè)插件。它出現(xiàn)的主要目的就是檢測頁面的性能。它讓用戶可以就近取得所需的內(nèi)容，解決網(wǎng)絡(luò)擁擠的狀況，提髙用戶訪問網(wǎng)站的響應(yīng)速度。其次，雅虎在 Etags的配置上也有獨(dú)特之處，它聲明網(wǎng)頁對象過期。也就是說，當(dāng)用戶從服務(wù)器取數(shù)據(jù)的時(shí)候，如果文件變化了，就給他反饋新的文件。如果文件沒有變化，只須告訴客戶端沒有變化即可，不必再把文件取回來，這樣就節(jié)省了大量的網(wǎng)絡(luò)帶寬和資源。另外只要將那些在加載過程中要執(zhí)行的腳本放到底部，就可以實(shí)現(xiàn)最大數(shù)量的并行下載。19、如何讓 WebStrom忽略 node_modules的索引？WebStrom在打開一個(gè)項(xiàng)目的時(shí)候會有一個(gè)索引過程。如果計(jì)算機(jī)配置不高，打開一個(gè)帶有 node_modules文件夾的項(xiàng)目，那簡直就是一場“災(zāi)難”。為了提高打開速度，避免每次“災(zāi)難”的重現(xiàn)，可以在菜單欄中選擇File→ Setting→ Editor→ File types→ Ignore files and folders。在 Ignore files and folders 選項(xiàng)最后加上 node_modules并保存就可以了，然后重啟WebStorm。相關(guān)推薦
【前端面試題】01—42道常見的HTML5面試題(附答案)
【前端面試題】02—59道CSS面試題(附答案)
【前端面試題】03—200+道常見JavaScript基礎(chǔ)面試題上（附答案）
【前端面試題】04—33道基礎(chǔ)CSS3面試題(附答案)
【前端面試題】05—17道面向?qū)ο蟮拿嬖囶}(附答案)
【前端面試題】06—16道設(shè)計(jì)模式面試題（附答案）
【前端面試題】07—47道基礎(chǔ)的VueJS面試題(附答案)
