初學者好好用 Chrome 開發者工具


Posted by cmtilo on 2021-04-26

在寫程式卡關搞不清除程式碼怎麼跑的時候很好用~推薦

STEP1

首先我們開一個檔案,先打好網頁基本格式,將javascript程式碼寫在標籤裡面,把檔案副檔名存成.html。
基本格式大概長這樣:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        function solve(lines) {
            //這邊有你打的程式碼...程式碼...
        }

        solve(lines) //呼叫執行function
    </script>
</body>
</html>

STEP2

然後用 Chrome 瀏覽器執行html檔。

STEP3

按 F12 打開 Chrome 開發者工具。


以上大家應該都清楚,接下來神奇的來了!

STEP4

在程式碼加上一行debbuger你就可以看到程式一行一行的跑~

sublime 畫面

說明:javascript程式碼最前方加上一行debbuger

Chrome 瀏覽器畫面

說明:按小箭頭→就可以逐步看程式碼執行的步驟

再也不用擔心自己想的跟電腦想的不一樣了~


#初學者







Related Posts

[第六週] 認識 HTML 及常用標籤 (上)

[第六週] 認識 HTML 及常用標籤 (上)

React 又肥又慢,為什麼我還要用它?

React 又肥又慢,為什麼我還要用它?

Day 91

Day 91


Comments