debug: cleanup how variables with no value are rendered

fixes #54011

src/vs/workbench/parts/debug/browser/baseDebugView.ts

@@ -83,13 +83,13 @@ export function renderExpressionValue(expressionOrValue: IExpression | string, c
 		}
 	}
 
-	if (options.maxValueLength && value.length > options.maxValueLength) {
+	if (options.maxValueLength && value && value.length > options.maxValueLength) {
 		value = value.substr(0, options.maxValueLength) + '...';
 	}
 	if (value && !options.preserveWhitespace) {
 		container.textContent = replaceWhitespace(value);
 	} else {
-		container.textContent = value;
+		container.textContent = value || '';
 	}
 	if (options.showHover) {
 		container.title = value;
@@ -103,8 +103,6 @@ export function renderVariable(variable: Variable, data: IVariableTemplateData,
 		dom.toggleClass(data.name, 'virtual', !!variable.presentationHint && variable.presentationHint.kind === 'virtual');
 	}
 
-	if (variable.value) {
-		data.name.textContent += (typeof variable.name === 'string') ? ':' : '';
 	renderExpressionValue(variable, data.value, {
 		showChanged,
 		maxValueLength: MAX_VALUE_RENDER_LENGTH_IN_VIEWLET,
@@ -112,9 +110,8 @@ export function renderVariable(variable: Variable, data: IVariableTemplateData,
 		showHover: true,
 		colorize: true
 	});
-	} else {
-		data.value.textContent = '';
-		data.value.title = '';
+	if (variable.value && typeof variable.name === 'string') {
+		data.name.textContent += ':';
 	}
 }
 

src/vs/workbench/parts/debug/electron-browser/watchExpressionsView.ts

@@ -300,8 +300,6 @@ class WatchExpressionsRenderer implements IRenderer {
 		}
 
 		data.name.textContent = watchExpression.name;
-		if (watchExpression.value) {
-			data.name.textContent += ':';
 		renderExpressionValue(watchExpression, data.value, {
 			showChanged: true,
 			maxValueLength: MAX_VALUE_RENDER_LENGTH_IN_VIEWLET,
@@ -310,6 +308,9 @@ class WatchExpressionsRenderer implements IRenderer {
 			colorize: true
 		});
 		data.name.title = watchExpression.type ? watchExpression.type : watchExpression.value;
+
+		if (watchExpression.value) {
+			data.name.textContent += ':';
 		}
 	}