如何强制Chrome加载页面时显示真实源码并调试Google Charts启动Bug

核心需求 #

1. 强制Chrome加载时显示真实源码：使用--auto-open-devtools-for-tabs参数启动Chrome，且已开启「自动为弹窗打开DevTools」全局设置，但页面加载时显示的是Chrome生成的内容（如VM10这类临时文件），错误堆栈的行号完全不准确，导致无法定位仅在页面首次启动时随机出现的JavaScript Bug，且该Bug刷新页面后不会复现。
2. 解决Google Charts启动异常：页面启动时因resize事件触发Google Charts加载失败，随机出现以下三类错误：
   • TypeError: Cannot read properties of undefined (reading 'Gantt')
   • ReferenceError: elementGantt is not defined
   • TypeError: google.visualization.Gantt is not a constructor
     已尝试基于防抖逻辑实现的smart-resize方案，但问题仍未解决。

现有代码 #

smart-resize.js #

// 防抖resize事件实现
(function ($, sr) {
    var debounce = function (func, threshold, execAsap) {
        var timeout;

        return function debounced() {
            var obj = this, args = arguments;

            function delayed() {
                if (!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };

            if (timeout)
                clearTimeout(timeout);
            else if (execAsap)
                func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 100);
        };
    }
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery, 'smartresize');

index.js #

// jQuery页面加载时执行
$(document).ready(function() {
    google.charts.load("current", {
        callback: function() {
            drawGanttChart();
        },
        packages: ["gantt"], 
        language: "fr"
     });

    // 防抖resize事件触发图表重绘
    $(window).smartresize(function() {
        drawGanttChart();
    });

    // 绘制甘特图的函数
    function drawGanttChart() {
        const elementDiv = document.getElementById("idDivGanttChartSVG");
        
        let elementGantt = null;
        try {
            elementGantt = new google.visualization.Gantt(elementDiv);

            if (typeof elementGantt === "undefined" || elementGantt == null)
                throw new Error(`elementGantt is not defined`);
        }
        catch (ex) {
            console.error(ex);

            google.charts.load("current", {
                packages: ["gantt"], 
                language: "fr"
            });
            elementGantt = new google.visualization.Gantt(elementDiv);
        }

        google.visualization.events.addListener(elementGantt, "ready", function () {

        });
        google.visualization.events.addListener(elementGantt, "error", function (err) {
            console.error(`Error Stack ==> [${JSON.stringify(err)}]`);
        });
        google.visualization.events.addListener(elementGantt, "onmouseover", function (e) {
            elementGantt.setSelection([e]);
        });
        google.visualization.events.addListener(elementGantt, "onmouseout", function (e) {
            elementGantt.setSelection([{ row: null, column: null }]);
        });

        const chartDataTable = new google.visualization.DataTable();

        chartDataTable.addColumn("string", "ID");
        chartDataTable.addColumn("string", "任务");
        chartDataTable.addColumn("string", '分组');
        chartDataTable.addColumn("date", "开始日期");
        chartDataTable.addColumn("date", "结束日期");
        chartDataTable.addColumn("number", "时长");
        chartDataTable.addColumn("number", "完成百分比");
        chartDataTable.addColumn("string", "依赖");

        const arrGanttData = [
            ["idTache0","任务 1",null,"2022-09-03T04:00:00.000Z","2022-09-07T04:00:00.000Z",null,0,null],
            ["idTache1","任务 2",null,"2022-09-06T04:00:00.000Z","2022-09-07T04:00:00.000Z",null,0,null],
            ["idTache2","任务 3",null,"2022-09-06T04:00:00.000Z","2022-09-17T04:00:00.000Z",null,0,null],
            ["idTache3","任务 4",null,"2022-09-04T04:00:00.000Z","2022-09-15T04:00:00.000Z",null,0,null],
            ["idTache4","任务 5",null,"2022-09-11T04:00:00.000Z","2022-09-17T04:00:00.000Z",null,0,null]
        ];
        chartDataTable.addRows(arrGanttData);

        elementGantt.clearChart();
        
        elementGantt.draw(chartDataTable, {
            height: chartDataTable.getNumberOfRows() * 42 + 50,
            tooltip: {
                isHtml: false
            },
            gantt: {
                criticalPathEnabled: true,
                criticalPathStyle: {
                    stroke: "#e64a19",
                    strokeWidth: 5
                }
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Codingwiz