HTML/Javascript网站有时会停止工作-如何调试它？
我有一个带有图表和数据表的网站。整个系统使用微控制器ESP8266在一个很小的PCB上工作，所以这个页面在C语言中作为一个字符表加载到它。不幸的是，由于某些原因，页面每隔几个小时就会挂起一次。页面代码如下。不幸的是，我没有javascript和调试网页问题的经验。有没有办法确定浏览器工具（F12）的问题？除非你们中有人能马上发现问题所在？ 整件事都是基于HTML/Javascript网站有时会停止工作-如何调试它？,javascript,Javascript,我有一个带有图表和数据表的网站。整个系统使用微控制器ESP8266在一个很小的PCB上工作，所以这个页面在C语言中作为一个字符表加载到它。不幸的是，由于某些原因，页面每隔几个小时就会挂起一次。页面代码如下。不幸的是，我没有javascript和调试网页问题的经验。有没有办法确定浏览器工具（F12）的问题？除非你们中有人能马上发现问题所在？ 整件事都是基于 沃伦克·沃沃沃罗多维斯科维奇监测站-塞维洛尼亚 帆布{ -moz用户选择：无； -webkit用户选择：无； -ms用户选择：无； } /*
沃伦克·沃沃沃罗多维斯科维奇监测站-塞维洛尼亚
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
/*数据表样式*/
#数据表{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
#数据表td，#数据表th{
边框：1px实心#ddd；
填充：8px；
}
#数据表tr:n个子（偶数）{背景色：#f2f2；}
#dataTable tr:hover{背景色：#ddd；}
#数据表th{
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
背景色：#4CAF50；
颜色：白色；
}
.tg{边框折叠：折叠；边框间距：0；边距：0px自动；}
.tg td{边框颜色：黑色；边框样式：纯色；边框宽度：1px；字体系列：Arial，无衬线；字体大小：14px；
溢出：隐藏；填充：10px 5px；分词：正常；}
.tg th{边框颜色：黑色；边框样式：纯色；边框宽度：1px；字体系列：Arial，无衬线；字体大小：14px；
字体大小：正常；溢出：隐藏；填充：10px 5px；分词：正常；}
.tg.tg-7vwr{背景颜色：#fd6864；边框颜色：#c0c0；颜色：#ffffff；字体大小：粗体；文本对齐：左侧；垂直对齐：顶部}
.tg.tg wtex{边框颜色：#c0c0；字体大小：粗体；文本对齐：右侧；垂直对齐：顶部}
.tg.tg-bx42{边框颜色：#c0c0；字体大小：粗体；文本对齐：左侧；垂直对齐：顶部}
有没有办法确定浏览器工具（F12）的问题
它不能自己停下来
有两种可能的情况你应该看一下：
控制台中的错误。在DevTools（F12）中，转到“控制台”选项卡。查找红色文本
网络问题。在DevTools中，转到“网络”选项卡，搜索“状态”=“挂起”（因此挂起）-警告：在运行站点之前打开DevTools，否则网络面板将为空
如果你有这样一个问题，只需在答案中添加描述即可。如果没有真正的问题，这里就没有什么可以解决的
最后一个注意事项：作为代码来源的链接是以不同的方式构造的。看一看:
xhttp.onreadystatechange=function（）{
if（this.readyState==4&&this.status==200）{
/* ... */
showGraph（）；
/* ... */
}
}
这是对服务器的异步请求<代码>onreadystatechangeshowGraph（）。。。
getDataTemperature（）；
getData湿度（）；
getMinMax（）；
updateTable（）；
...
updateTable<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Monitor Warunków Środowiskowych - Serwerownia</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/* Data Table Styling */
#dataTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#dataTable td, #dataTable th {
border: 1px solid #ddd;
padding: 8px;
}
#dataTable tr:nth-child(even){background-color: #f2f2f2;}
#dataTable tr:hover {background-color: #ddd;}
#dataTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-7vwr{background-color:#fd6864;border-color:#c0c0c0;color:#ffffff;font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-wtex{border-color:#c0c0c0;font-weight:bold;text-align:right;vertical-align:top}
.tg .tg-bx42{border-color:#c0c0c0;font-weight:bold;text-align:left;vertical-align:top}
</style>
</head>
<body>
<div class="chart-container" position: relative; height:350px; width:100%">
<canvas id="Chart" width="400" height="400"></canvas>
</div>
<br>
<br>
<div>
<table class="tg" id="minmaxtemp">
<thead>
<tr>
<th class="tg-7vwr">Temperatura - zarejestrowane wartości graniczne</th>
<th class="tg-7vwr">Minimalna</th>
<th class="tg-7vwr">Maksymalna</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-wtex">Wartość [°C]</td>
<td class="tg-bx42"></td>
<td class="tg-bx42"></td>
</tr>
<tr>
<td class="tg-wtex">Czas</td>
<td class="tg-bx42"></td>
<td class="tg-bx42"></td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div>
<table id="dataTable">
<tr><th>Czas</th><th>Temperatura [°C]</th><th>Wilgotność [%]</th></tr>
</table>
</div>
<br>
<br>
<script>
var valuesT = [];
var valuesH = [];
var timeStamp = [];
var TempValue;
var HumValue;
var PressValue;
var minmaxstring;
var TempValueMin = 200.0;
var TempValueMax = -200.0;
function showGraph()
{
//for (i = 0; i < arguments.length; i++) {
// valuesT.push(arguments[i]);
//}
var ctx = document.getElementById("Chart").getContext('2d');
var Chart2 = new Chart(ctx, {
type: 'line',
data: {
labels: timeStamp, //Bottom Labeling
datasets: [
{
label: "Temperatura",
fill: false, //Try with true
backgroundColor: 'rgba( 255, 51, 51 , 1)', //Dot marker color
borderColor: 'rgba( 255, 51, 51 , 1)', //Graph Line Color
data: valuesT,
},
{
label: "Wilgotność",
fill: false, //Try with true
backgroundColor: 'rgba( 3, 194, 252 , 1)', //Dot marker color
borderColor: 'rgba( 3, 194, 252 , 1)', //Graph Line Color
data: valuesH,
}
],
},
options: {
title: {
display: true,
text: "Monitor Warunków Środowiskowych - Serwerownia"
},
maintainAspectRatio: false,
elements: {
line: {
tension: 0 //Smoothening (Curved) of data lines
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
animation: {
duration: 0
},
plugins: {
zoom: {
// Container for pan options
pan: {
// Boolean to enable panning
enabled: true,
// Panning directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow panning in the y direction
// A function that is called as the user is panning and returns the
// available directions can also be used:
// mode: function({ chart }) {
// return 'xy';
// },
mode: 'xy',
rangeMin: {
// Format of min pan range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max pan range depends on scale type
x: null,
y: null
},
// On category scale, factor of pan velocity
speed: 20,
// Minimal pan distance required before actually applying pan
threshold: 10,
// Function called while the user is panning
onPan: function({chart}) { console.log(`I'm panning!!!`); },
// Function called once panning is completed
onPanComplete: function({chart}) { console.log(`I was panned!!!`); }
},
// Container for zoom options
zoom: {
// Boolean to enable zooming
enabled: true,
// Enable drag-to-zoom behavior
drag: true,
// Drag-to-zoom effect can be customized
// drag: {
// borderColor: 'rgba(225,225,225,0.3)'
// borderWidth: 5,
// backgroundColor: 'rgb(225,225,225)',
// animationDuration: 0
// },
// Zooming directions. Remove the appropriate direction to disable
// Eg. 'y' would only allow zooming in the y direction
// A function that is called as the user is zooming and returns the
// available directions can also be used:
// mode: function({ chart }) {
// return 'xy';
// },
mode: 'xy',
rangeMin: {
// Format of min zoom range depends on scale type
x: null,
y: null
},
rangeMax: {
// Format of max zoom range depends on scale type
x: null,
y: null
},
// Speed of zoom via mouse wheel
// (percentage of zoom on a wheel event)
speed: 0.1,
// Minimal zoom distance required before actually applying zoom
threshold: 2,
// On category scale, minimal zoom level before actually applying zoom
sensitivity: 3,
// Function called while the user is zooming
onZoom: function({chart}) { console.log(`I'm zooming!!!`); },
// Function called once zooming is completed
onZoomComplete: function({chart}) { console.log(`I was zoomed!!!`); }
}
}
}
}
});
}
//On Page load show graphs
window.onload = function() {
console.log(new Date().toLocaleTimeString());
//showGraph(0,0,0,0);
};
//Ajax script to get Temperature at every Second
//Read This tutorial https://circuits4you.com/2018/02/04/esp8266-ajax-update-part-of-web-page-without-refreshing/
setInterval(function() {
// Call a function repetatively with Second interval
getDataTemperature();
getDataHumidity();
getMinMax();
updateTable();
}, 5000); //update rate [ms]
function getDataTemperature() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
TempValue = this.responseText;
}
};
xhttp.open("GET", "readBME280_temperature", true); //Handle readBME280 server on ESP8266
xhttp.send();
}
function getDataHumidity() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
HumValue = this.responseText;
}
};
xhttp.open("GET", "readBME280_humidity", true); //Handle readBME280 server on ESP8266
xhttp.send();
}
function getDataPressure() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
PressValue = this.responseText;
}
};
xhttp.open("GET", "readBME280_pressure", true); //Handle readBME280 server on ESP8266
xhttp.send();
}
function getMinMax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
minmaxstring = this.responseText;
}
};
xhttp.open("GET", "readMinMax", true);
xhttp.send();
}
function updateTable() {
var timeutc = new Date();
timeutc.setHours( timeutc.getHours() + 2 );
var time = timeutc.toLocaleTimeString();
//values.push(TemperatureValue);
if (TempValue != null && HumValue != null){
valuesT.push(TempValue);
valuesH.push(HumValue);
timeStamp.push(time);
showGraph(); //Update Graphs
//Update Data Table
var table = document.getElementById("dataTable");
var row = table.insertRow(1); //Add after headings
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = time;
cell2.innerHTML = TempValue;
cell3.innerHTML = HumValue;
}
var min_temp_cell = document.getElementById("minmaxtemp").rows[1].cells[1];
min_temp_cell.innerHTML = minmaxstring.slice(0,5);
var min_temp_time_cell = document.getElementById("minmaxtemp").rows[2].cells[1];
min_temp_time_cell.innerHTML = minmaxstring.slice(5,24);
var max_temp_cell = document.getElementById("minmaxtemp").rows[1].cells[2];
max_temp_cell.innerHTML = minmaxstring.slice(24,29);
var max_temp_time_cell = document.getElementById("minmaxtemp").rows[2].cells[2];
max_temp_time_cell.innerHTML = minmaxstring.slice(29,48);
}
</script>
</body>
</html>