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