關於chromejs執行順序的信息

本文目錄一覽：

• 1、js的執行原理是什麼？
• 2、如何實現javascript多線程同時運行？
• 3、chrome 如何調試js
• 4、chrome開發者工具怎麼一步一步運行js
• 5、chrome要知道別人網站js的執行過程要怎麼調試
• 6、怎麼在chrome調試工具直接修改js代碼？

js的執行原理是什麼？

JS是解釋執行的，即讀取一個語句就執行一個。以前的嚴格JS是以分號為語句的分隔符，但現在一些瀏覽器已經接受以換行符為分隔符（似乎是很多人喜歡用基於對象的編程了，而在JS中寫對象的函數是需要加分號的，所以很多人都愛忘）。

JS本身只提供語法解析與少部分內部函數支持，其他的均由宿主支持。比如在網頁JS中的window, document, navigator等對象，均是由瀏覽器提供基於其它語言的代碼，這些代碼通常被隱藏，但很大程度上決定了JS的運行效率。如果你有興趣，打開Chrome，按F12，調處Console，然後輸alert（注意沒有()），你就會發現[native code]這個東西。

如何實現javascript多線程同時運行？

javascript沒有多線程，所以也不存在多線程同時運行的說法。平時寫代碼的時候需要考慮盡量避免線程阻塞。

比較好的方法就是盡量使用異步+回調的方式進行處理。

chrome 如何調試js

是可以調試js的。

使用的工具：谷歌瀏覽器、測試的網站；

可以按照下面的方法進行調試：

1、f12 打開開發者工具，控制台介紹：

Elements：頁面元素，可以進行編輯，保存後實時查看頁面效果；

Network： 查看js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。

2、點擊請求地址，會把請求的頭信息和響應信息等數據展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發送數據，直接預覽出來了。

3、Sources：次功能是js頁面調試中最突出的功能，上圖。

功能介紹：左側sources目錄可以展開，查看加載本頁面所調用的資源，如js，css，php。此處先介紹斷點調試，可以順序的看到程序的執行過車，勾選右側的Any XHR 按鈕，上圖。

4、一步一步執行，如添加數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在代碼行處單擊設置斷點，英文選項是add breakpoints，單擊右擊都可以，最是好用，上圖。

5、可以查看你設置的所有斷點，右側展開，如圖，斷點調試用的比較多，當然了還可以在js里直接寫代碼，查看實時數據變化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數供參考，上圖。

Profile：次功能主要測試加載文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不着。

備註：Console：此功能是模擬js控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變量的變化過程。還可以條用函數。

chrome開發者工具怎麼一步一步運行js

在source裏面找到代碼在左側打斷點，刷新頁面就會走斷點，然後F10或者F11去一步步走斷點

chrome要知道別人網站js的執行過程要怎麼調試

這裡舉例說明CSDN網站的調試過程：

1) 進入想要調試的網站，按F12打開調試模式

2) 點擊sources欄目，找到相關的js文件(有些網站做了加密設置，js文件不好找，例如百度)

3) 點開js文件後，點擊代碼顯示的行號可以進入調試模式，能看懂代碼就調試你想知道的執行過程即可，看不懂的話，查找init類似的關鍵字加斷點

4）進入調試模式後(添加斷點成功後)，F5刷新界面，或者手動點擊頁面刷新，F10,F12繼續(下一步)調試運行

備註: 通常而言，大網站的js都比較複雜，要看懂實屬不易,能看懂別人網站的js邏輯就好調試

怎麼在chrome調試工具直接修改js代碼？

1、在元素標籤上右鍵審查元素。

2、藍色部分與紅色箭頭所指是選中的元素代碼。

3、點擊箭頭所指的部位,打開控制台,如果js 異常會在這裡顯示相關信息。

4、按照箭頭的順序點擊,在代碼59行,打上斷點。

5、點擊箭頭所指的位置,刷新頁面。

6、js運行到斷點的位置會暫停。

7、點擊右側箭頭所指的位置,單步執行js代碼。

8、鼠標放在變量上,可以查看變量的相關信息。