218 lines
6.0 KiB
HTML
218 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
#container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#editor {
|
|
flex: 1;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#debugger {
|
|
flex: 1;
|
|
margin-left: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
#editor .line-number {
|
|
display: inline-block;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
color: #999;
|
|
}
|
|
#editor .line-number-highlight {
|
|
display: inline-block;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
color: #111;
|
|
}
|
|
|
|
#debugger {
|
|
margin-top: 20px;
|
|
}
|
|
#debugger button {
|
|
margin-right: 10px;
|
|
}
|
|
#editor .highlight {
|
|
background-color: yellow;
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="editor"></div>
|
|
|
|
<div id="debugger">
|
|
<button id="start">Start</button>
|
|
<button id="stop">Stop</button>
|
|
<button id="step">单步执行</button>
|
|
<button id="stepInto">跳入</button>
|
|
<button id="stepOut">跳出</button>
|
|
<button id="continue">继续</button>
|
|
|
|
<br>
|
|
<input id="breakLineNo"/>
|
|
<button id="breakpoint">打断点</button>
|
|
<button id="removebreakpoint">去断点</button>
|
|
<br>当前断点：
|
|
<div id="cur_breakpoint"></div>
|
|
<br><br><br>
|
|
<input id="expression"/>
|
|
<button id="addExpression">添加表达式</button>
|
|
<button id="removeExpression">删除表达式</button>
|
|
<br>当前表达式：<br>
|
|
<div id="cur_exp"></div>
|
|
<br><br><br>
|
|
<br>本地变量：<br>
|
|
<div id="locals"></div>
|
|
<br><br><br>
|
|
|
|
<br>
|
|
控制台：
|
|
<div id="console"></div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
$(function() {
|
|
var $editor = $('#editor');
|
|
var $debugger = $('#debugger');
|
|
var editorText = "print(\"b\")\n" +
|
|
"\n" +
|
|
"def test():\n" +
|
|
" print(\"bbb\")\n" +
|
|
" \n" +
|
|
"if __name__ == \"__main__\":\n" +
|
|
" print(\"bb\")";
|
|
var currentLine = -1;
|
|
|
|
function updateEditor(text) {
|
|
var lines = text.split('\n');
|
|
var html = '';
|
|
for (var i = 0; i < lines.length; i++) {
|
|
html += '<div>';
|
|
html += '<span id="line' + (i+1) + '" class="line-number">' + (i+1) + '</span>';
|
|
html += '<span class="code">' + lines[i] + '</span>';
|
|
html += '</div>';
|
|
}
|
|
$editor.html(html);
|
|
}
|
|
|
|
function updateContent(data) {
|
|
console.log(data);
|
|
// 高亮行
|
|
highlightLine(data.current_line - 1);
|
|
// 取表达式值
|
|
var $cur_exp = $('#cur_exp');
|
|
$cur_exp.html(JSON.stringify(data.expressions));
|
|
// 取断点
|
|
var $cur_breakpoint = $('#cur_breakpoint');
|
|
$cur_breakpoint.html(data.breakpoints);
|
|
// 取本地变量
|
|
var $locals = $('#locals');
|
|
$locals.html(JSON.stringify(data.locals));
|
|
// 取控制台输出
|
|
var $console = $('#console');
|
|
$console.html(data.stdout);
|
|
|
|
}
|
|
|
|
function highlightLine(lineNumber) {
|
|
if (currentLine >= 0) {
|
|
$editor.find('div').eq(currentLine).removeClass('highlight');
|
|
}
|
|
if (lineNumber >= 0) {
|
|
$editor.find('div').eq(lineNumber).addClass('highlight');
|
|
}
|
|
currentLine = lineNumber;
|
|
}
|
|
|
|
function sendRequest(url, data, callback) {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: url,
|
|
data: data,
|
|
success: callback,
|
|
error: function(jqXHR, textStatus, errorThrown) {
|
|
console.error('Error sending request:', textStatus, errorThrown);
|
|
}
|
|
});
|
|
}
|
|
|
|
$debugger.find('#start').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/start', {}, function(data) {
|
|
console.log(data);
|
|
});
|
|
});
|
|
|
|
$debugger.find('#stop').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/stop', {}, function(data) {
|
|
console.log(data);
|
|
highlightLine(-1);
|
|
});
|
|
});
|
|
|
|
$debugger.find('#step').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "next"}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#stepInto').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "step"}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#stepOut').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "return"}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#continue').on('click', function() {
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "continue"}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#breakpoint').on('click', function() {
|
|
var $breakLineNo = $('#breakLineNo');
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "break b.py:" + $breakLineNo.val() + ""}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#removebreakpoint').on('click', function() {
|
|
var $breakLineNo = $('#breakLineNo');
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "clear b.py:" + $breakLineNo.val() + ""}, updateContent);
|
|
});
|
|
|
|
$debugger.find('#addExpression').on('click', function() {
|
|
var $expression = $('#expression');
|
|
sendRequest('http://127.0.0.1:8079/add_expression', {"expression": $expression.val()}, updateContent);
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "where"}, updateContent);
|
|
|
|
});
|
|
|
|
$debugger.find('#removeExpression').on('click', function() {
|
|
var $expression = $('#expression');
|
|
sendRequest('http://127.0.0.1:8079/remove_expression', {"expression": $expression.val()}, updateContent);
|
|
sendRequest('http://127.0.0.1:8079/run_command', {"command": "where"}, updateContent);
|
|
|
|
});
|
|
|
|
updateEditor(editorText);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|