Backtraces & 8.1 in dbg preview

Author: seanmorris

.gitignore

@@ -1,26 +1,14 @@
 /php*.js
 /php*.mjs
-/php*.js.br
-/php*.mjs.br
-/php*.js.gz
-/php*.mjs.gz
 /php*.wasm
 /php*.wat
-/php-*.wasm.gz
-/php-*.wasm.br
 /php*.wasm.map
 /php*.data
-/php*.data.gz
-/php*.data.br
 docs-source/app/assets/php*.js
 docs-source/app/assets/php*.wasm
-docs-source/app/assets/php*.wasm.gz
-docs-source/app/assets/php*.wasm.br
 docs-source/app/assets/php*.wat
 docs-source/app/assets/php*.wasm.map
 docs-source/app/assets/php*.data
-docs-source/app/assets/php*.data.gz
-docs-source/app/assets/php*.data.br
 /Php*.js
 /Php*.mjs
 /*.js
@@ -61,3 +49,5 @@ demo-web/public/static/media/mapped/*
 packages/**/index.html
 packages/*.tar.gz
 packages/dependencies.json
+*.gz
+*.br

demo-web/src/Debugger.js

@@ -113,6 +113,7 @@ export default forwardRef(function Debugger({
 	const [userClasses, setUserClasses] = useState({});
 
 	const [includedFiles, setIncludedFiles] = useState([]);
+	const [trace, setTrace] = useState([]);
 
 	const [currentPanel, setCurrentPanel] = useState('none');
 
@@ -368,6 +369,10 @@ export default forwardRef(function Debugger({
 				case 'files':
 					setIncludedFiles( await (await phpRef.current).dumpFiles() || [] );
 					break;
+
+				case 'trace':
+					setTrace( await (await phpRef.current).dumpBacktrace() || [] );
+					break;
 			}
 		}
 		else
@@ -469,6 +474,11 @@ export default forwardRef(function Debugger({
 				setIncludedFiles( await (await phpRef.current).dumpFiles() || [] );
 				setCurrentPanel('files');
 				break;
+
+			case 'trace':
+				setTrace( await (await phpRef.current).dumpBacktrace() || [] );
+				setCurrentPanel('trace');
+				break;
 		}
 	};
 
@@ -496,6 +506,7 @@ export default forwardRef(function Debugger({
 				<button onClick = {async () => switchRightPanel('classes')}>classes</button>
 				<button onClick = {async () => switchRightPanel('functions')}>functions</button>
 				<button onClick = {async () => switchRightPanel('files')}>files</button>
+				<button onClick = {async () => switchRightPanel('trace')}>trace</button>
 			</div>
 			<div className='phpdbg-panel-frame inset'>
 				<div className='phpdbg-panel-frame-inner'>
@@ -529,6 +540,13 @@ export default forwardRef(function Debugger({
 							</div>
 						})}
 					</div>
+					<div className='phpdbg-panel phpdbg-trace'>
+						{trace.map((frame) => {
+							return <div key={frame.frame} onClick = {() => openFile(frame.filename, frame.lineNo)}>
+								<span>{frame.filename}: {frame.lineNo}</span>
+							</div>
+						})}
+					</div>
 				</div>
 			</div>
 		</div>

demo-web/src/Editor.css

@@ -139,4 +139,8 @@
 
 .editor iframe {
 	flex-grow: 1;
+}
+
+select.bevel option {
+	background-color: #FFF;
 }

demo-web/src/Editor.js

@@ -176,6 +176,14 @@ export default function Editor() {
 			window.history.replaceState({}, null, window.location.pathname + '?' + query);
 		}
 
+		if(currentPath.current !== path)
+		{
+			activeLines.current.forEach(m => {
+				editor.session.removeMarker(m);
+				activeLines.current.delete(m);
+			});
+		}
+
 		currentPath.current = path;
 
 		editor.setReadOnly(!!openDbg.current);
@@ -309,11 +317,6 @@ export default function Editor() {
 
 		if(exists)
 		{
-			activeLines.current.forEach(m => {
-				editor.session.removeMarker(m);
-				activeLines.current.delete(m);
-			});
-
 			await openFile(file);
 
 			editor.scrollToLine(-1 + line, true, true, () => {});
@@ -361,11 +364,6 @@ export default function Editor() {
 
 				if(exists)
 				{
-					activeLines.current.forEach(m => {
-						editor.session.removeMarker(m);
-						activeLines.current.delete(m);
-					});
-
 					await openFile(file);
 
 					activeLines.current.forEach(m => {
@@ -425,10 +423,11 @@ export default function Editor() {
 					</button>
 					{!isExecuting ? (
 						<>
-							{phpdbg ? '' : <select defaultValue = '8.3' ref={versionSelector}>
+							{phpdbg ? '' : <select className='bevel' defaultValue = '8.3' ref={versionSelector}>
 								<option>8.4</option>
 								<option>8.3</option>
 								<option>8.2</option>
+								<option>8.1</option>
 							</select>}
 							<button className='square' title = "Debugger" onClick = {handleStartDebugger}>
 								{phpdbg ? '⏹' : '▶'}

demo-web/src/dbg-preview.css

@@ -257,6 +257,10 @@
 	display: initial;
 }
 
+[data-current-panel="trace"] .phpdbg-panel.phpdbg-trace {
+	display: initial;
+}
+
 
 .phpdbg-panel-frame {
 	position: relative;
@@ -276,6 +280,7 @@
 
 .phpdbg-panel.phpdbg-files > div,
 .phpdbg-panel.phpdbg-classes > div,
+.phpdbg-panel.phpdbg-trace > div,
 .phpdbg-panel.phpdbg-functions > div {
 	padding: 0.5rem;
 	border-bottom: 1px solid #CCC;
@@ -284,6 +289,7 @@
 
 .phpdbg-panel.phpdbg-files > div span,
 .phpdbg-panel.phpdbg-classes > div span,
+.phpdbg-panel.phpdbg-trace > div,
 .phpdbg-panel.phpdbg-functions > div > span {
 	cursor: pointer;
 }

source/PhpDbgWeb.js

@@ -65,7 +65,7 @@ export class PhpDbgWeb extends PhpBase
 	{
 		const php = (await this.binary);
 
-	const cmd = ['phpdbg', '-c', '/php.ini', '-e'];
+		const cmd = ['phpdbg', '-c', '/php.ini', '-e'];
 
 		const ptrs = cmd.map(part => {
 			const len = php.lengthBytesUTF8(part) + 1;
@@ -372,6 +372,53 @@ export class PhpDbgWeb extends PhpBase
 		return files;
 	}
 
+	async dumpBacktrace()
+	{
+		const php = await this.binary;
+
+		const ptr = php.ccall(
+			'vrzno_dbg_dump_backtrace'
+			, NUM
+			, []
+			, []
+			, {}
+		);
+
+		console.log({ptr});
+
+		const heap = new DataView(php.HEAP8.buffer);
+		const end = ptr + heap.getInt32(ptr, true);
+		const pointerLen = 4;
+
+		let cur = ptr + pointerLen;
+		const dec = new TextDecoder;
+		const frames = [];
+
+		let i = 0;
+
+		while(cur < end)
+		{
+			const filenameLen = heap.getInt32(cur, true);
+			cur += pointerLen;
+
+			const filename = dec.decode(php.HEAP8.slice(cur, cur + filenameLen));
+			cur += filenameLen + 1;
+
+			const lineNo = heap.getInt32(cur, true);
+			cur += pointerLen;
+
+			frames.push({filename, lineNo, frame: i});
+
+			i++;
+		}
+
+		console.log(frames);
+
+		php._free(ptr);
+
+		return frames;
+	}
+
 	async refresh()
 	{
 		// super.refresh();