整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
in10系統IE瀏覽器無法打開HTML文件怎么辦？最近有用戶發現，重裝Win10系統后，使用IE瀏覽器無法打開html文件，該如何解決？請看下文具體介紹。
1.點擊桌面右下角的通知圖標，選擇“所有設置”。如下圖所示
2.在設置窗口，點擊“網絡和Internet”選項。如下圖所示
3.打開網絡和Internet窗口中，在搜索框中輸入“Internet”，找到并點擊Internet選項。如下圖所示
4.在打開的Internet屬性窗口，切換到“程序”選項，點擊“設置關聯”。如下圖所示
5.在設置程序關聯窗口，直接勾選需要關聯的程序，最后保存即可。如下圖所示
.如何調出開發者工具
按F12調出
右鍵檢查（或快捷鍵Ctrl+Shift+i）調出
2.開發者工具初步介紹
chrome開發者工具最常用的四個功能模塊：元素（ELements）、控制臺（Console）、源代碼（Sources），網絡（Network）。
元素（Elements）：用于查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面
控制臺（Console）：控制臺一般用于執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"并執行~
源代碼（Sources）：該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。
網絡（Network）：網絡頁面主要用于查看header等與網絡連接相關的信息。
2.1元素（Elements）
查看元素的代碼：點擊左上角的箭頭圖標（或按快捷鍵Ctrl+Shift+C）進入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置
查看元素的屬性：定位到元素的源代碼之后，可以從源代碼中讀出改元素的屬性。如下圖中的class、src、width等屬性的值。
當然從源代碼中讀到的只是一部分顯式聲明的屬性，要查看該元素的所有屬性，可以在右邊的側欄中查看：
修改元素的代碼與屬性：點擊元素，然查看右鍵菜單，可以看到chrome提供的可對元素進行的操作：包括編輯元素代碼（Edit as HTML）、修改屬性（Add attribute、Edit attribute）等。選擇Edit as HTML選項時，元素進入編輯模式，可以對元素的代碼進行任意的修改。當然，這個修改也僅對當前的頁面渲染生效，不會修改服務器的源代碼，故而這個功能也是作為調試頁面效果而使用。
查看元素的CSS屬性：在元素的右邊欄中的styles頁面可以查看該元素的CSS屬性，這個頁面展示該元素原始定義的CSS屬性以及從父級元素繼承的CSS屬性。從這個頁面還可以查到該元素的某個CSS特性來自于那個CSS文件，使編碼調試時修改代碼變得非常方便。
在Styles頁旁邊，有一個Computed頁面，這個頁面展示該元素經過計算之后的所有CSS屬性，即最后瀏覽器渲染頁面時使用的屬性。屬性的計算由瀏覽器自動進行，是瀏覽器渲染頁面的一個必不可少的過程。
修改元素的CSS屬性：在元素的Styles頁面，可以對元素的CSS屬性進行修改，甚至刪除原有、添加新屬性。不過，這些修改，僅對當前瀏覽器的頁面展示生效，不會修改CSS源代碼。所以在這里進行CSS屬性的修改一般用來調整和完善元素的渲染效果。
給元素添加斷點：在元素的右鍵菜單中選擇斷點選項（Break on…），選中之后，當元素被修改（通常是被JS代碼修改）時，頁面加載會暫停，然后可以查看該元素的屬性。
元素斷點添加之后，可以在右側欄的DOM Breakpoints頁面中看到，這個頁面可以看到當前網頁的所有元素斷點。
查看元素的監聽事件：元素的右邊欄的Event Listener頁面，可以查看到該元素的所有監聽事件。在開發中，尤其是維護其他人的代碼時，會出現不了解元素對應的監聽事件，這個時候，可以在這個頁面中找到。這個頁面不僅能看到對應的事件函數，還可以定位該函數所在的JS文件以及在該文件中的具體位置（行數），大大提高開發維護的效率。
控制臺（Console）
console.log()顯示一般的基本日志信息，當要顯示的基本日志太多時可以使用console.group將相關的日志進行分組。console.warn()顯示帶有黃色小圖標的警告信息。
console.error()顯示帶有紅色小圖標的紅色的錯誤的信息。
查看JS對象的及其屬性：
執行JS語句：
查看控制臺日志：當網頁的JS代碼中使用了console.log()函數時，該函數輸出的日志信息會在控制臺中顯示。日志信息一般在開發調試時啟用，而當正式上線后，一般會將該函數去掉
源代碼（Source）
查看文件：在源代碼（Source）頁面可以查看到當前網頁的所有源文件。在左側欄中可以看到源文件以樹結構進行展示。
添加斷點：在源代碼左邊有行號，點擊對應行的行號，就好給改行添加上一個斷點（再次點擊可刪除斷點）。右鍵點擊斷點，在彈出的菜單中選擇Edit breakpoint可以給該斷的添加中斷條件。
中斷調試：添加斷點后，當JS代碼運行到斷點時會中斷（對于添加了中斷條件的斷點在符合條件時中斷），此時可以將光標放在變量上查看變量的
也可以在右邊的側欄上查看：
在右側變量上方，有繼續運行、單步跳過等按鈕，可以在當前斷點后，逐行運行代碼，或者直接讓其繼續運行。
Network詳細介紹
那我就按照從左到右的順序來寫啦~
：記錄按鈕 處于打開狀態時會在此面板進行網絡連接的信息記錄，關閉后則不會記錄。
：清除按鈕 清除當前的網絡連接記錄信息。（點擊一下就能清空）
：捕獲截屏 記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視窗口截取，如下圖所示。
：過濾器 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。
也可以是一些指定條件 指定條件有哪些？
domain：資源所在的域，即url中的域名部分。如 domain:api.github.com
has-response-header：資源是否存在響應頭，無論其值是什么。如 has-response-header：Access-Control-Allow-Origin
is：當前時間點在執行的請求。當前可用值：running
larger-than：顯示大于指定值大小規格的資源。單位是字節(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K
method：使用何種HTTP請求方式。如 GET
mime-type：也寫作content-type，是資源類型的標識符。如 text/html
scheme：協議規定。如 HTTPS
set-cookie-name：服務器設置的cookies名稱
set-cookie-value：服務器設置的cookies的值
set-cookie-domain：服務器設置的cookies的域
status-code：HTTP響應頭的狀態碼
：顯示詳細信息
：顯示時間流
能夠根據時間，查看對應時間下 瀏覽器請求的資源信息
：是否保留日志
當選擇保留日志，重新加載url當前界面時，之前請求顯示的資源信息，會保留下來，不會清空的喲~
：是否進行緩存
當打開開發者工具時生效，打開這個開關，則頁面資源不會存入緩存，可以從Status欄的狀態碼看文件請求狀態。
：設置模擬限速，如下圖所示。
設置限速可以模擬處于各種網絡環境下的不同用戶訪問本頁面的情況。
Network主題內容介紹
下列介紹中，前者為名詞解釋，后者為舉例
Name/Pat：資源名稱以及URL路徑 （main.css）
Method：Http請求方法 (GET或者POST)
status/Text：Http狀態碼/文字解釋 （200，ok）
Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
Initiator：解釋請求是怎么發起的，有四種可能的值
1.Parser ：請求是由頁面的html解析時發送
2.Redirect：請求是由頁面重定向發送
3.script ：請求是由script腳本處理發送
4.other ：請求是由其他過程發送的，比如頁面里的Link鏈接點擊
size/content：size是響應頭部和響應體結合的大小，content是請求解碼后的大小
請求文件具體說明
點擊某個具體請求后的界面，如下圖所示：
一共分為四個模塊：
Headers
Header面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等
Preview：預覽面板，用于資源的預覽。
Response：響應信息面板包含資源還未進行格式處理的內容
Timing：資源請求的詳細信息花費時間
細節補充
對某請求右鍵，出現頁面如下圖所示。
Copy Request Headers：復制HTTP請求頭到系統剪貼板
Copy Response Headers：復制HTTP響應頭到系統剪貼板
Copy Response：復制HTTP響應內容到系統剪貼板
Copy as cURL：將網絡請求作為一個curl的命令字符復制到系統剪貼板(curl是一種開源的命令行工具和庫，用于配合url語法進行數據傳輸)
Copy All as HAR：將網絡請求記錄信息以HAR格式復制到系統剪貼板(what is HAR file)
Save as HAR with Content：將資源的所有的網絡信息保存到HAR文件中(.har文件)
Clear Browser Cache：清除瀏覽器緩存
Clear Browser Cookies：清除瀏覽器cookies
Open in Sources Panel：當前選中資源在Sources面板打開
Open Link in New Tab：在新tab打開資源鏈接
Copy Link Address：復制資源url到系統剪貼板
ostman是一款支持http協議的接口調試與測試工具，其主要特點就是功能強大，使用簡單且易用性好 。無論是開發人員進行接口調試，還是測試人員做接口測試，postman都是我們的首選工具之一 。那么接下來就介紹下postman到底有哪些功能，它們分別都能干些什么 。下面先通過一張圖來直觀地來看下postman中所包含的功能 。
當然，以上功能也只是展示了postman的一部分功能，為了能更加全面的體現這款工具的特點，我將從以下三個維度來加以說明。它們分別是：
postman在2018年之后就不再支持瀏覽器版本，所以，想要使用它就必須先下載客戶端再安裝使用，下面就以Windows系統為例進行安裝 。
1.下載與安裝
postman安裝步驟：
2.界面導航說明
初次使用postman的朋友可能對界面上的一些元素不太熟悉，下面就通過一張圖來說明這些元素的含義 。
3.發送第一個請求
如果你是第一次使用postman發送請求，下面這個例子可以作為一個最基本的入門，可以幫我們建立一個初始印象 。
1.常見類型的接口請求
常見的接口有如下四種類型，分別是含有查詢參數的接口，表單類型的接口，json類型的接口以及含有上傳文件的接口，以下就對這四種類型接口及如何在postman中請求進行說明 。
1.1 .查詢參數的接口請求
什么是查詢參數?
所謂的查詢參數，其實就是URL地址中問號（?）后面的部分就叫查詢參數，比如：http://cx.shouji.360.cn/phonearea.php?number=13012345678 。在這個接口中，查詢參數就是:number=13012345678 。而這一部分是由有鍵值對組成，格式為：key1=value1&key2=value2, 如果有多組鍵值對，要用&隔開 。
postman如何請求
在postman中實現對這類接口請求非常簡單，一般就需要明確倆個參數即可，一個是請求方法，一個請求地址。
針對上面的那個接口，地址已經給出 ，而它的請求方法是get 。那么在postman中只需要把這倆個參數填寫上即可請求 。
具體實現步驟：
說明：查詢參數的URL一般直接拷貝到輸入的URL地址欄中就可以了，當然也可以把查詢參數在Params中輸入，倆者的效果是一樣的 。
1.2 表單類型的接口請求
什么是表單 ？
我們都知道，在發送HTTP請求的時候，一個請求中一般包含三個部分，分別是請求行，請求頭，請求體 。
不同的接口，請求體的數據類型是不一樣的，比較常見的一種就是表單類型，那么什么是表單類型呢 ？ 簡單理解就是在請求頭中查看Content-Type，它的值如果是:application/x-www-form-urlencoded .那么就說明客戶端提交的數據是以表單形式提交的 。見下圖
postman中如何請求？
如果在postman請求上圖的接口，我們只需要填寫四個參數，分別是(可以參考上圖)：
實現步驟：
1.3 上傳文件的表單請求
在做接口測試時，我們經常會遇到需要上傳文件的接口，比如微信的更新頭像。這就需要用到：multipart/form-data。它也屬于一種表單，但它既支持表單請求，也支持文件上傳。 它的請求報文中數據往往是下面這樣的。
POST http://localhost/index.php/home/Uploadify/imageUp/savepath/head_pic/pictitle/banner/dir/images.html HTTP/1.1
Content-Type: multipart/form-data
file=a1.jpg這種類型的接口，在postman中該如何請求呢 ？ 我們先分析需要填寫的參數 。
實現步驟：
1.4 json類型的接口請求
這應該是接口測試中最常見的一種情況了 ， 也就是請求體類型為json,我們來看下這個請求報文 。
POST http://xxx/api/sys/login HTTP/1.1
Content-Type: application/json;charset=UTF-8
{"account":"root","password":"123456"}根據以上報文，我們可以分析出，我們在postman只需要填寫四個參數即可，具體如下：
實現步驟：
2.接口響應數據解析
響應數據是發送請求后經過服務器處理后返回的結果，響應由三部分組成，分別是狀態行、響應頭、響應體。我們來看下postman的響應數據展示。
在postman中的響應數據展示：
那么這些數據對我們做接口測試有什么作用呢 ？
接下來我們再來關注下Body中的幾個顯示主題，分別是：Pretty，Raw，Preview .
Pretty:翻譯成中文就是漂亮 ， 也就是說返回的Body數據在這個標簽中查看 ，都是經過格式化的，格式化后的數據看起來更加直觀，所以postman默認展示的也是這個選項。比如返回html頁面，它會經過格式化成HTML格式后展示，比如返回json，那么也會格式化成json格式展示 。
Raw：翻譯成中文未經過加工的，也就是原始數據 ，原始數據一般都是本文格式的，未經過格式化處理的，一般在抓包工具中都有這個選項 。
Preview：翻譯成中文就是預覽，這個選項一般對返回HTML的頁面效果特別明顯，如請求百度后返回結果，點擊這個選項后就直接能查看到的頁面 ，如下圖 。同時這個選項和瀏覽器抓包中的Preview也是一樣的 。
3.接口管理（Collection）
當我們對一個或多個系統中的很多用例進行維護時，首先想到的就是對用例進行分類管理，同時還希望對這批用例做回歸測試 。在postman也提供了這樣一個功能，就是Collection 。通過這個Collection就可以滿足我們的上面說的需求。
先對Collection功能的使用場景做個簡單總結 。
那么Collection是如何去管理用例的呢 ？ 先想象我們要測試一個系統，系統下有多個模塊，每個模塊下有很多的被測接口用例 。那么基于這個場景，我們來通過Collection來進行實現：
那么通過以上三個步驟，達到的效果就是如圖所示：
總結，通過上面的操作，我們實現了一個最簡單的demo模型。但實際上，有了這個功能才是postman學習的開始，因為很多功能都是基礎這個功能的基礎上進行的，比如用例的批量執行，Mock ，接口文檔等功能 。
4. 批量執行接口請求
當我們在一個Collection中編寫了很多的接口測試用例，想一起執行這批用例，在postman中是如何操作呢 ？
實現步驟：
對上面的幾個紅框內的功能進行簡單說明：
總體來說，這個功能主要是用于對一個Collection中的所有用例或部分用例進行批量運行，已達到手工回歸測試的目的。
5.日志調試
在做接口測試時，經常會因為代碼寫的有問題導致報錯，這時通過查看日志就顯得非常重要了，postman也提供了這樣的功能，它允許我們在腳本中編寫打印語句，查看打印的結果 ; 同時也可以查看每個請求的日志信息 。
在postman中編寫日志打印語句使用的是JavaScript，編寫的位置可以是Pre-request Script 或Tests標簽中。編寫打印語句如：console.log("我是一條日志")
那么打印的日如何看呢 ？ 在postman中有倆個入口，第一個入口就是：view-show postman console 。
第二個入口就是左下角第三個圖標 。
打開的日志界面
這里面有幾個比較實用的功能：
總之，通過這個功能，我們在請求接口報錯時，通過打印響應的日志，就能很輕松地找到問題原因了 。
6.斷言
如果沒有斷言，我們只能做接口的功能測試，但有了斷言后，就為我們做自動化提供了條件，并且在postman中的斷言是非常方便和強大的 。
我們先來了解下postman斷言的一些特點 ，具體如下
在上面我們介紹到，編寫的斷言代碼是JavaScript，那如果不會寫怎么辦 ？ 不用擔心，因為postman已經給我們內置了一些常用的斷言 。用的時候，只需從右側點擊其中一個斷言，就會在文本框中自動生成對應斷言代碼塊 。
接下來就讓我們了解一些常用斷言，還是按響應的組成來劃分，分別是狀態行，響應頭，響應體。
狀態行中又包括狀態碼，狀態消息 。在postman也可以對這兩個進行斷言
狀態行中的斷言：
pm.test("Status code is 200", function () {
pm.response.to.have.status(200); //這里填寫的200是預期結果，實際結果是請求返回結果
});pm.test("Status code name has string", function () {
pm.response.to.have.status("OK"); //斷言響應狀態消息包含OK
});響應頭中的斷言
pm.test("Content-Type is present", function () {
pm.response.to.have.header("Content-Type"); //斷言響應頭存在"Content-Type"
});斷言響應體(重點)
pm.test("Body matches string", function () {
pm.expect(pm.response.text()).to.include("string_you_want_to_search");
});
//注解
pm.expect(pm.response.text()).to.include("string") 獲取響應文本中包含stringpm.test("Body is correct", function () {
pm.response.to.have.body("response_body_string");
});
//注解
pm.response.to.have.body("response_body_string"); 獲取響應體等于response_body_stringpm.test("Your test name", function () {
var jsonData = pm.response.json();
pm.expect(jsonData.value).to.eql(100);
});
//注解
var jsonData = pm.response.json() 獲取響應體，以json顯示，賦值給jsonData .注意：該響應體必須返會是的json，否則會報錯
pm.expect(jsonData.value).to.eql(100) 獲取jsonData中鍵名為value的值，然后和100進行比較響應時間(一般用于性能測試)
pm.test("Response time is less than 200ms", function () {
pm.expect(pm.response.responseTime).to.be.below(200); //斷言響應時間<200ms
});案例說明：
針對以下接口返回的數據進行斷言：
{
"cityid": "101120101",
"city": "濟南",
"update_time": "2020-04-17 10:50",
"wea": "晴",
"wea_img": "qing",
"tem": "16",
"tem_day": "20",
"tem_night": "9",
"win": "東北風",
"win_speed": "3級",
"win_meter": "小于12km/h",
"air": "113"
}總結，整體來說，如果用postman做接口測試，這個斷言功能必不可少，其中我們常斷言的響應體包含和JSON這倆個斷言又是重重之重。
7. 變量（全局/集合/環境）
變量可以使我們在請求或腳本中存儲和重復使用其值，通過將值保存在變量中，可以在集合，環境或請求中引用。
對我們做接口測試來說，又是一個非常重要的功能 。
在postman常用的三種變量分別是全局變量，環境變量，集合變量 。
其中，他們的作用域范圍依次從大到小：全局變量>集合變量>環境變量 。 當在幾個不同的范圍內都申明了相同的變量時，則會優先使用范圍最小的變量使。
想要使用變量中的值只需倆個步驟，分別是定義變量和獲取變量 。
定義變量
定義全局變量和環境變量，點擊右上角的小齒輪，彈出如下界面，就可以根據需求定義全局變量或者環境變量了。
已經定義的全局變量和環境變量，可以進行快速查看
定義集合變量
選擇一個集合，打開查看更多動作(...)菜單，然后點擊編輯 。選擇“變量”選項卡以編輯或添加到集合變量。
定義變量除了以上方式，還有另外一種方式 。但是這種方式在不同的位置定義，編寫不一樣。
在Tests，Pre-requests Script：
獲取變量
定義好變量，接下來就可以使用變量了 。需要注意的是，在不同的位置獲取變量，編寫的規則也是不一樣的 。
如果在請求參數中獲取變量，無論是獲取全局變量，還是環境變量，還是集合變量，獲取的方式都是一樣的編寫規則：{{變量名}} 。
如果是在編寫代碼的位置(Tests,Pre-requests Script)獲取變量，獲取不同類型的變量，編寫的代碼都不相同，具體如下：
變量的使用場景非常廣泛，比如我們后面要提到的接口關聯，請求前置腳本都會使用到變量 。
8.請求前置腳本
前置腳本其實就是在Pre-requests Script中編寫的JavaScript腳本，想要了解這個功能，需要先了解它的執行順序。那么下面就來看下它的執行順序 。
可以看出，一個請求在發送之前，會先去執行Pre Request Script（前置腳本）中的代碼 。那么這個功能在實際工作中有什么作用呢 ？
主要場景：一般情況下，在發送請求前需要對接口的數據做進一步處理，就都可以使用這個功能，比如說，登錄接口的密碼，在發送前需要做加密處理，那么就可以在前置腳本中做加密處理，再比如說，有的接口的輸入參數有一些隨機數，每請求一次接口參數值都會發送變化，就可以在前置腳本中編寫生成隨機數的代碼 。總體來說，就是在請求接口之前對我們的請求數據進行進一步加工處理的都可以使用前置腳本這個功能。
接下來通過一個案例來看下該功能是如何使用 ？
案例：
實現步驟：
總之，這個前置腳本對我們做接口測試也非常有用，對一些復雜的場景，都可以使用前置腳本進行處理后再請求接口 。
9. 接口關聯
在我們測試的接口中，經常出現這種情況 。 上一個接口的返回數據是下一個接口的輸入參數 ，那么這倆個接口就產生了關聯。 這種關聯在做接口測試時非常常見，那么在postman中，如何實現這種關聯關系呢 ？
實現思路：
案例：
{
"url": "/public/upload/user//head_pic//ba51d1c2f7f7b98dfb5cad90846e2d79.jpg",
"title": "banner",
"original": "",
"state": "SUCCESS",
"path": "images"
}而圖像預覽接口URL為：http://localhost/public/upload/user//head_pic//ba51d1c2f7f7b98dfb5cad90846e2d79.jpg 。可以看出這個接口的URL后半部分其實是上一個接口返回的url的值 。那么這倆個接口就產生了關聯。那么在postman 可以通過以下三步完成這倆個接口的關聯實現 。
實現步驟：
可以看出，接口的關聯的解決方案都是用的是變量中的知識，也就是說只要你明確了要提取的值，后面就是保存該值，然后在其他接口使用該值就可以了。
10.常見返回值獲取
在做接口測試時，請求接口返回的數據都是很復雜的json數據，有著多層嵌套，這樣的數據層級在postman怎么獲取呢 ？
案例1：多層json嵌套, 獲取user_id的值
{
"code": 0,
"message": "請求成功！",
"data": {
"user_id": "1252163151781167104"
}
}//獲取json體數據
var jsonData = pm.response.json()
// 獲取user_id的值,通過.獲取
var user_id = jsonData.data.user_id案例2：json中存在列表，獲取points中的第二個元素
{
"code": 0,
"message": "請求成功！",
"data": {
"roles": {
"api": [
"API-USER-DELETE"
],
"points": [
"point-user-delete",
"POINT-USER-UPDATE",
"POINT-USER-ADD"
]
},
"authCache": null
}
}//獲取json體數據
var jsonData = pm.response.json()
// 獲取user_id的值,通過下標獲取列表中某個元素
var user_id = jsonData.data.roles.points[1]案例3：列表中取最后一個元素
{
"code": 0,
"message": "請求成功！",
"data": {
"total": 24,
"rows": [
{
"id": "1066370498633486336",
"mobile": "15812340003",
"username": "zbz"
},
{
"id": "1071632760222810112",
"mobile": "16612094236",
"username": "llx"
},
...
{
"id": "1075383133106425856",
"mobile": "13523679872",
"username": "test001",
},//獲取json體數據
var jsonData = pm.response.json()
// 獲取id的值,通過slice(-1)獲取列表中最后一個元素。
var id = jsonData.data.rows.slice(-1)[0]說明：由于平臺文章規則限制，在一文中無法容納過多的內容，故將第二部分和第三部分分成兩個單獨的篇幅加以發布，感興趣的朋友可以查看后面的兩篇postman文章 。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
