整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
S是解釋型語言，是逐條語句解釋執行的，如果錯誤發生在某個語句塊，此語句塊以前的語句一般都可以正常執行。這不同于C等編譯型語言。
代碼調試的重點在于找到錯誤發生點，然后才能有的放矢。
通常可以使用警告框來提示變量信息。
alert(document.body.innerHTML);
當警告框彈出時，用戶將需要單擊“確定”來繼續。
<div id="demo">
<script>
var arr=[1,2,3,4,5]
document.write(arr[2] + ' ') //3
</script>
</div>需要注意的是是，以下寫法會替換整個頁面的內容：
<button type="button" onclick="document.write(5 + 6)">試一試</button>
即使是函數調用也是如此。
document.getElementById("demo").innerHTML =""
<h1>JavaScript Array.filter()</h1>
<p>使用通過測試的所有數組元素創建一個新數組。</p>
<p id="demo"></p> //45,25
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
JS的運行環境是瀏覽器，由瀏覽器引擎解釋執行JS代碼，一般來說，瀏覽器也提供調試器，如chrome按F12即可調出高試器：
<!DOCTYPE html>
<html>
<body>
<h4>我的第一張網頁</h4>
<p>使用F12在瀏覽器（Chrome、IE、Firefox）中激活調試，然后在調試器菜單中選擇“控制臺”。</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>如果您的瀏覽器支持調試，那么您可以使用 console.log() 在調試窗口中顯示 JavaScript 的值：
內置的調試器可打開或關閉，強制將錯誤報告給用戶。
通過調試器，您也可以設置斷點（代碼執行被中斷的位置），并在代碼執行時檢查變量。
<p id="demo"></p>
<script>
try {
adddlert("歡迎您，親愛的用戶！");
}
catch(err) {
demo.innerHTML = err.message; //adddlert is not defined
}
</script>JavaScript 實際上會創建帶有兩個屬性的 Error 對象：name 和 message。
name 設置或返回錯誤名。
message 設置或返回錯誤消息（一條字符串）。
debugger停止執行 JavaScript，并調用調試函數（如果可用）。
可以注釋掉一些可疑代碼來確定錯誤發生點。
或者考慮逐步增加代碼的方法，逐步驗證，以避免錯誤。
8.1 意外使用賦值運算符
如果程序員在 if 語句中意外使用賦值運算符（=）而不是比較運算符（===），JavaScript 程序可能會產生一些無法預料的結果。
8.2 令人困惑的加法和級聯
加法用于加數值。
級聯（Concatenation）用于加字符串。
在 JavaScript 中，這兩種運算均使用相同的 + 運算符。
正因如此，將數字作為數值相加，與將數字作為字符串相加，將產生不同的結果：
var x = 10 + 5; // x 中的結果是 15
var x = 10 + "5"; // x 中的結果是 "105"而加法以外的其它算法運算符可以將字符串進行自動類型轉換。
10-"5" // 5
8.3 令人誤解的浮點數
JavaScript 中的數字均保存為 64 位的浮點數（Floats），符合IEEE754的標準。
所有編程語言，包括 JavaScript，都存在處理浮點值的困難：
var x = 0.1;
var y = 0.2;
var z = x + y // z＝0.300000000000000048.4 錯位的分號
因為一個錯誤的分號，此代碼塊無論 x 的值如何都會執行：
if (x == 19);
{
// code block
}在一行的結尾自動關閉語句是默認的 JavaScript 行為。
在 JavaScript 中，用分號來關閉（結束）語句是可選的。
8.5 對象使用命名索引
在 JavaScript 中，數組使用數字索引。
在 JavaScript 中，對象使用命名索引。
如果您使用命名索引，那么在訪問數組時，JavaScript 會將數組重新定義為標準對象。
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length; // person.length 將返回 0
var y = person[0]; // person[0] 將返回 undefined
y=person["age"]; //ok
y=person.age;//ok
document.getElementById("demo").innerHTML = y
</script>8.6 Undefined 不是 Null
Undefined 的類型是 Undefined，Null的類型是Object。
JavaScript 對象、變量、屬性和方法可以是未定義的。
此外，空的 JavaScript 對象的值可以為 null。
在測試非 null 之前，必須先測試未定義：
if (typeof myObj !== "undefined" && myObj !== null)
8.7 JS沒有塊作用域（與C語言不同）
在 ES2015 之前，JavaScript 只有兩種類型的作用域：全局作用域和函數作用域。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript不會為每個代碼塊創建新的作用域。</p>
<p>此代碼將顯示 i（10）的值，即使在 for 循環塊之外：</p>
<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //10
</script>
</body>
</html>ES2015 引入了兩個重要的 JavaScript 新關鍵詞：let 和 const。
這兩個關鍵字在 JavaScript 中提供了塊作用域（Block Scope）變量（和常量）。
for (let i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //不能訪問-End-
本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。
HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。
使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。
我們現在創建一個典型的HTML結構具體如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML實例</title>
6. </head>
7. <body>
8. <h1>我是標題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁面中各個標簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面
2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束
3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題
4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落
我們現在通過游覽器打開編寫的HTML內容，具體內容如下
在HTML中的內容可以通過以下格式進行內容注釋具體如下：
（1）HTML標簽
HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：
1）標簽一般是成對出現的 如:<div></div>;也有空標簽 如:<br />
2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)
3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母
標簽的示列如下：
標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。
1）雙標簽
雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：
1. <標記名></標記名>
常見的雙標簽有如下幾種：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 塊級元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超鏈接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）單標簽
單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
1. <標記名/>
常見的單標簽有如下幾種：
1. <!-- 換行標簽 -->
2. <br />
3.
4. <!-- 分隔線標簽 -->
5. <hr />
6.
7. <!-- 圖片標簽 -->
8. <img /> （2）HTML元素
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：
1. <div>
2. <h1>我是標題</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML屬性
屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:
（4）HTML實體編碼
對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格 。
（5）HTML事件
通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：
（1）h標簽
h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1標題</h1>
9. <h2>H2標題</h2>
10. <h3>H3標題</h3>
11. <h4>H4標題</h4>
12. <h5>H5標題</h5>
13. <h6>H6標題</h6>
14. </body>
15. </html> 我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。
（2）p標簽
p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>標題一</h4>
10. <p>我是段落1</p>
11.
12. <h4>標題二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a標簽
a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">點我跳轉到百度頁面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>
14. </div>
15.
16. </body>
17. </html> （4）div標簽
div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表標簽
列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默認方式數字排列 -->
10. <p>有序列表默認方式數字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大寫字母排列 -->
18. <p>有序列表大寫字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）無序列表ol
無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>無序列表默認type樣式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>無序列表方塊樣式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定義列表dl
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定義列表</p>
10. <dl>
11. <dt>東岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>華山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它標簽
1）換行標簽<br/>
在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：
2）分割線標簽<hr/>
<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是張三</p>
10. <!-- 分割線標簽 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
文作者從開發者角度出發，介紹了幾個關于 Chrome 開發者工具的高級用法。熟練使用這些高級用法可以大大地提高你的生產力。如果你選擇 Chrome 作為開發環境，那么你應該知道下面關于它的 11 個使用技巧。
圖片來源 Morning Brewon，Unsplash
好了，現在由于某種原因，你最終選擇了 Chrome 瀏覽器作為開發及調試的環境。接下來，打開開發者工具并開始調試代碼。
很多時候你可以打開“控制臺”面板來檢查程序的輸出，或者打開“元素”面板來檢查 DOM 元素的 CSS 代碼。
但是你真的了解 Chrome 開發者工具嗎？實際上，它提供了許多強大但很多人未知的功能，可以極大地提高我們的開發效率。
在這里，我將介紹幾個最有用的功能，希望能對你有所幫助。
在開始之前，我想介紹一下 Chrome 的命令菜單。命令菜單之于 Chrome，就像 Shell 之于 Linux 一樣。你可以在鍵盤敲入相應命令來操作 Chrome。
首先，我們打開 Chrome 開發者工具，然后使用以下快捷鍵打開命令菜單：
或者我們可以按照下圖所示的步驟將其打開：
然后，我們可以轉到“命令”面板，在這里我們可以輸入一些命令來執行很多強大的功能。
捕獲屏幕內容是一個非常常見的功能需求，當然我非常確定在你當前的計算機上已經有了非常方便的截圖工具了。但是，你可以完成以下任務嗎？
這是兩個很普通的要求，但是使用操作系統隨附的屏幕截圖工具不太容易解決。這個時候，我們可以在 Chrome 使用相關命令來幫助我們完成此要求。
上面兩個需求的對應的命令是：
舉個例子
現在可以打開任意的網頁，例如，Medium 上 JavaScript 的熱門文章頁面。
https://medium.com/tag/javascript
打開“命令”菜單并執行Screenshot Capture full size screenshot。
然后，我們可以就獲得當前頁面的完整屏幕截圖了。
上面的原始圖像實際上非常清晰，只是在這里我上傳了壓縮圖像以節省你的流量。
同樣地，如果要截取某個 DOM 元素的屏幕截圖，就完全可以使用系統自帶的屏幕截圖工具，但當窗口不能完全捕獲該元素內容時，此時，你可以使用Capture node screenshot命令。
首先，我們在“元素”面板中選擇一個元素，然后運行Capture node screenshot命令，如下圖所示。
下面是準確的屏幕截圖的結果：
我們常常需要在控制臺中調試代碼。比如你想知道如何在 JavaScript 中反轉字符串，然后你在網絡上搜索相關信息并找到以下代可行代碼。
'abcde'.split('').reverse().join('')沒問題，上面的代碼確實對字符串進行了翻轉。但你還想了解 split()、reverse()、join() 這些方法的作用以及運行他們的中間步驟的結果。因此，現在你想逐步執行上述代碼，可能會編寫如下內容：
好了，經過上面這些操作，我們確實知道了每個方法運行的返回值，也就了解了各個方法的作用。
但是，這給人的感覺有點多此一舉。上面的做法既容易出錯，又難以理解。實際上，在控制臺中，我們可以使用魔術變量$_引用上一次操作的結果。
$_是一個特殊變量，它的值始終等于控制臺中上一次操作的執行結果。它可以讓你更加優雅地調試代碼。
XHR，即 XMLHttpRequest，是一種創建 AJAX 請求的 JavaScript API 。
在我們的前端項目中，我們經常需要使用 XHR 向后端發出請求來獲取數據。如果你想重新發送 XHR 請求，那么該怎么辦呢？
對于新手來說，可能會選擇刷新頁面，但這可能比較麻煩。實際上，我們可以直接在“網絡”面板中進行調試。
下面是一個 gif 示例，方便你理解：
從一開始完全加載頁面可能需要十秒鐘以上的時間。我們有時需要監控頁面在不同的時間點相關資源的加載行為。
在 Chrome 開發者工具中，我們可以使用“網絡”面板下的Capture Screenshots功能來捕獲頁面加載時的屏幕截圖。
單擊每個屏幕截圖可以顯示相應的當前時間的網絡請求狀態。這種可視化的演示會讓你更好地了解網絡請求的詳細過程。
你可以將 JavaScript 變量的值復制到其他地方嗎？
這似乎是不可能完成的任務，但是在 Chrome 瀏覽器中，有一個名為copy的函數可以幫助你實現這個功能。
該copy函數不是由 ECMAScript 定義的，而是由 Chrome 瀏覽器提供的。使用此功能，你可以將 JavaScript 變量的值復制到你的剪貼板中，方便在其他位置使用。
處理網頁上的圖像的通常有兩種方法，一種是通過外部資源鏈接加載它們，另一種是將圖像編碼為 Data URI。
Data URL，即前綴為data:協議的 URL，允許內容創建者在文檔中嵌入小文件。在被 WHATWG 撤消該名稱之前，它們被稱為“Data URI”。
將這些小圖像編碼到 Data URL 并將它們直接嵌入到我們的代碼中，可以減少頁面需要發出的 HTTP 請求的數量，從而加快頁面加載速度。
所以在 Chrome 瀏覽器中，我們該如何將圖像轉換為 Data URL 呢？可以參考下面的 gif 圖像：
假設我們有一個下面這樣的數組對象：
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]這樣的數組在控制臺中不容易查看閱讀。如果數組更長，元素內容很復雜，那么該數據將變得更加難以理解。
幸運的是，Chrome 提供了表格展示功能，可以將數組對象進行列表展示，方便理解。
在很多情況下，該功能非常好用。
有時我們想調整頁面上某些 DOM 元素的位置以測試 UI。在“元素”面板中，你可以拖放任何 HTML 元素來更改其在頁面中的顯示位置：
上面的展示中，在“元素”面板中將某個 div 的位置拖動到其他位置，它在網頁上的展示位置就會同步更改。
>$0是另一個魔術變量，它會引用“元素”面板中當前選定的 DOM 元素。<是另一個魔術變量，它會引用“元素”面板中當前選定的 dom="">
CSS 偽類不僅可以讓你將樣式應用于文檔樹內容，還可以將其應用于外部元素，例如導航器的歷史記錄（例如:visited），其內容的狀態（ 例如某些表單元素的:checked），或鼠標的位置（例如:hover，它可以讓你知道當前鼠標是否在某個元素內容之上）。
我們可能為一個元素編寫多個 CSS 偽類，并且為了方便我們對這些樣式進行測試，我們可以直接在“元素”面板中選擇觸發或關閉這些樣式。
下面有一個測試網頁：
我們在瀏覽器中將其打開，然后通過“元素”面板對 CSS 樣式進行調試。
在調試 CSS 樣式時，我們通常需要隱藏一個元素。如果選擇元素并按下鍵盤上的H鍵，我們就可以快速隱藏該元素。
此操作實際上增加了visibility: hidden !important;樣式到對應的元素上面。
如果要想在控制臺中快速獲取某個 DOM 元素的引用，可以執行以下操作：
以上就是我想要介紹的 Chrome 開發者工具的高級用法，希望可以幫助到你。
作者介紹：
bitfish，Medium 平臺社區編輯，愛好閱讀、寫作和編程。
原文鏈接：
https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
