我如何在JavaScript代碼中發現問題

Question

昨天，我在玩我的JavaScript，突然間我的代碼中有奇怪的Bug，我無法解決。

我的網站加載了一個svg元素：

<div id="content">
<svg id="drawing"
     title="Layouteditor"
     viewBox="0 0 600 500"
     xmlns="http://www.w3.org/2000/svg"
     version="2.0"
     preserveAspectRatio="xMidYMid meet"
     onload="makeDraggable(evt)">
</svg>
</div>

通過一些console-loggign ，我可以看到makeDraggable運行一次。 在document加載后（ document.ready ），我立即收到以下消息：

0：未定義“ makeDraggable”

我絕對知道此功能之前沒有任何問題。 我試圖清空所有內容，因此只有Ready文檔具有這一行：

console.log("documentReady"); 

而且makeDraggable有一行

console.log("makeDraggable");

這是輸出：

makeDraggable 8（780,9）documentReady 8（709,9）0：未定義'makeDraggable'

當然，我的站點中還有很多其他功能，但是我如何找出第二個調用的來源以及它為什么會出錯？

Answer 1

好的，我發現了我的錯。 我在MVC站點中添加了指向樣式表的鏈接。 在此樣式表中，我有一個錯誤，我沒有看到，因為樣式按預期工作。 似乎SVG在樣式方面存在一些問題。 我試圖設置文字樣式

.CDC400 {
font: 10px sans-serif;
fill: black;
stroke-width: 0;
}

此類附加到SVG文本。 如果我嘗試填充：紅色； 一切正常，黑色不起作用？？？ 十六進制值也不起作用。 WTF？

更新，十六進制值在站點第二次刷新后開始工作