debugging Chrome浏览器启动页面上的真实的源代码

ssm49v7z  于 2022-11-14  发布在  其他
关注(0)|答案(1)|浏览(117)

有没有可能强制Chrome(或任何其他浏览器)在加载时显示页面的实际源代码
我用标志参数--auto-open-devtools-for-tabs打开了Chrome,并且启用了全局设置Auto-open DevTools for popups,但是页面源代码没有正确显示。相反,它是由Chrome自己生成的,并且堆栈跟踪不准确 (VM10???和6087行是错误的)(见所附图像)。

通常,这没什么大不了的,我只是重新加载页面,但我有这个Javascript错误,它只在启动时和随机时间不一致地生成,当堆栈跟踪没有用时,它不可能进行调试,而且页面重新加载时不会生成错误。
我只想知道实际的堆栈跟踪在我的Javascript文件的哪一行。

**错误是由于Google Charts未在启动时正确加载页面大小,并在每次加载页面时给予多个不同的错误:TypeError: Cannot read properties of undefined (reading 'Gantt')ReferenceError: elementGantt is not definedTypeError: google.visualization.Gantt is not a constructor

smart-resize与此answer中的setTimeout配合使用,但未成功。
编号

  • 智能调整大小.js*
//https://stackoverflow.com/questions/8950761/google-chart-redraw-scale-on-window-resize/17547008#17547008
//https://gist.github.com/randylien/5683851
// note from developer: [smartresize from Paul Irish http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/]
// set timeout when window resize event
(function ($, sr) {
    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    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);
        };
    }
    // smartresize 
    jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery, 'smartresize');
  • 索引.js*
// 'smart-resize.js' is imported in the HTML
// <script type="text/javascript" src="~/js/smart-resize.js"></script>

// jQuery executed on page load
$(document).ready(function() {
    google.charts.load("current", {
        callback: function() {
            drawGanttChart();
        },
        packages: ["gantt"], 
        language: "fr"
     });

    // this does not work and reload the page too many times
    //$(window).resize(() => drawGanttChart());

    // used to dynamically resize Google Charts on window resize 
    // to make it more responsive
    // with a timeout of 100ms between each resize
    $(window).smartresize(function() {
        drawGanttChart();
    });

    // function that draws the chart
    function drawGanttChart() {
        const elementDiv = document.getElementById("idDivGanttChartSVG");
        
        // where the error is generated
        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", "Tâches");
        chartDataTable.addColumn("string", 'Groupes');
        chartDataTable.addColumn("date", "Date de début");
        chartDataTable.addColumn("date", "Date de fin");
        chartDataTable.addColumn("number", "Durée");
        chartDataTable.addColumn("number", "Pourcentage complété");
        chartDataTable.addColumn("string", "Dependances");

        const arrGanttData = [
            ["idTache0","Tâche 1",null,"2022-09-03T04:00:00.000Z","2022-09-07T04:00:00.000Z",null,0,null],
            ["idTache1","Tâche 2",null,"2022-09-06T04:00:00.000Z","2022-09-07T04:00:00.000Z",null,0,null],
            ["idTache2","Tâche 3",null,"2022-09-06T04:00:00.000Z","2022-09-17T04:00:00.000Z",null,0,null],
            ["idTache3","Tâche 4",null,"2022-09-04T04:00:00.000Z","2022-09-15T04:00:00.000Z",null,0,null],
            ["idTache4","Tâche 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
                }
            }
        });
    }
});
v1uwarro

v1uwarro1#

正如@Christopher所建议的,我将smartresize移到了google.charts.setOnloadCallback()函数中,并且没有收到错误。问题是window resize函数在google chart加载之前被调用了。
我还使用间隔setInterval(() => $(window).trigger('resize'), 5e2)进行了测试,当smartresize在回调之外时,它明显生成了一个错误。
然而,我还没有找到一种方法来获得真实的的源代码从Chrome的页面加载,所以让我知道,如果有人有一个解决方案。

相关问题