# Debug 頁面

可參考 :

<https://stackoverflow.com/a/25818251/4622645>

### 1.先在Source的右側選單選取要偵測的事件

![](https://github.com/easonwang01/web_advance/tree/1925ddcb36447378ab5377e38c84f5ccccca8136/assets/df1.png)

### 2.這時如果有用套件的話 Debug Function trace會跑進很多不相關的套件內容，把他加入blackbox即可

![](https://github.com/easonwang01/web_advance/tree/1925ddcb36447378ab5377e38c84f5ccccca8136/assets/df.png)

### 3.之後點擊按鈕後即會出現Debug選項

左邊是跳下一個script，右邊按鈕是跳入下一個Function

![](https://github.com/easonwang01/web_advance/tree/1925ddcb36447378ab5377e38c84f5ccccca8136/assets/df3.png)

> 也可在程式加入`debugger;` 來指定執行到哪裡時要中斷。

### 4.也可在元素上點擊，幫元素加上斷點

![](https://github.com/easonwang01/web_advance/tree/1925ddcb36447378ab5377e38c84f5ccccca8136/assets/df4.png)

## Debug深層Function

有時斷點執行時不會跳入深層Function的執行過程，我們只要在Function的開頭加上

```
debugger;
```

即可

```
function AssembleOrder() {
  debugger;
  if (!checkNonZeroNumber($("#multiples").val()))
  .....
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easonwang.gitbook.io/web_advance/debug-ye-mian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.