我如何在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？

更新，十六进制值在站点第二次刷新后开始工作