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