HTML/Javascript 网站不时停止工作 - 如何调试它？
[英]HTML/Javascript website stops working from time to time - how to debug it?
问题描述
我有一个带有图表和数据表的网站。 整个工作在一个带有微控制器 ESP8266 的微型 PCB 上，所以这个页面被加载到它作为 C 语言的字符表。 不幸的是，由于某种原因，页面每隔几个小时就会挂起一次。 页面代码如下。 不幸的是，我没有使用 javascript 和调试网页问题的经验。 有什么方法可以识别浏览器工具（F12）的问题？ 除非你们中的一个人能够立即发现问题可能是什么？ 整个过程基于https://circuits4you.com/2019/01/11/esp8266-data-logging-with-real-time-graphs/ 。
<!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>
1 个解决方案
解决方案1
1 2020-08-31 10:00:40
有什么方法可以识别浏览器工具（F12）的问题？
它不能自己停下来。
有 2 个可能的事情你应该看看：
- 控制台中的错误。 在 DevTools (F12) 中，转到“控制台”选项卡。 寻找红色文字。
- 网络问题。 在 DevTools 中，转到 Network 选项卡，搜索“Status” = “Pending”（因此它挂起） -警告：在运行站点之前打开 DevTools，否则 Network 面板将为空
如果您遇到此问题之一 - 只需在答案中添加说明即可。 如果没有真正的问题，这里就没有什么可以解决的。
最后一个注意事项：您用作代码来源的链接是以某种不同的方式构建的。 看一看：
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
/* ... */
showGraph();
/* ... */
}
}
这是对服务器的异步请求。 onreadystatechange被触发作为该请求的结果。 只有在那之后我们才调用showGraph() 。
但在你的代码中我看到：
...
getDataTemperature();
getDataHumidity();
getMinMax();
updateTable();
...
因此，您正在发送 3 个请求并调用updateTable而无需等待数据的真实响应。
当然，它不会破坏您的代码，所以这不是您的问题，这只是错误结构的注释。
向函数中添加.load（）方法会使函数第二次停止工作
[英]Adding a .load() method to the function stops the function from working the second time
调试javascript，并同时检查html和css的更改
[英]Debug javascript and at the same time examining html and css changes
如何在 HTML 中同时显示来自 JavaScript 数组的 5 个问题？
[英]How to display 5 questions from a JavaScript array at the same time in HTML?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.