[筆記]Chrome146開啟remotebebug模式

 

• chrome://inspect/#remote-debugging
• 使用 9222 port
• .vscode settings.json

{

  "mcpServers": {

    "chrome-devtools": {

      "command": "npx",

      "args": [

        "chrome-devtools-mcp@latest",

        "--autoConnect",

        "--channel=beta"

      ]

    }

  }

}

[筆記]chrome bookmark存放位置

•  C:\Users\使用者\AppData\Local\Google\Chrome\User Data\Default\Bookmark
• 檔案沒副檔名
• bookmark.bak：異動書籤會有一個bak備份檔

[JavaScript]Browser Console 網頁主控台

JavaScript 的程式不太好Debug，所以我們配合Browser Console，
來檢視目前程式發生什麼錯誤或是執行到什麼階段（配合log）。

以Chrome為例，開啟【開發人員工具】。（或F12）

此時我們可以發現Console中可能會存在一些資料的log。

設計師在撰寫JavaScript時，會將一些資訊log下來，方便檢視與瀏覽。

如何使用：

• Console中可能會記錄資料未載入成功的相關訊息。
• 多半以紅字顯示相關錯誤訊息，以yahoo為例。
• 設計師撰寫JavasScript：
• <script>    console.log(‘這是log訊息’);//log</script>

結論：

當程式發生錯誤時，如何快速的讓開發人員了解發生了什麼事情。

除了擷取錯誤畫面之外，配合著Console Log也是一個好的方式。

[筆記]移除Html5 Video Tag在Chome時的預設下載按鈕

在Chrome 55版本，Html5 Video Tag 會預設出現下載按鈕，（或許之後會移除?）。

參考：
http://stackoverflow.com/questions/41115801/in-chrome-55-prevent-showing-download-button-for-
html-5-video

可以透過CSS解決：

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

在此做個筆記。