--- a/devtools/client/debugger/src/components/Editor/DebugLine.js
+++ b/devtools/client/debugger/src/components/Editor/DebugLine.js
@@ -4,17 +4,18 @@
 
 // @flow
 import { PureComponent } from "react";
 import {
   toEditorPosition,
   getDocument,
   hasDocument,
   startOperation,
-  endOperation
+  endOperation,
+  getTokenEnd
 } from "../../utils/editor";
 import { isException } from "../../utils/pause";
 import { getIndentation } from "../../utils/indentation";
 import { connect } from "../../utils/connect";
 import {
   getVisibleSelectedFrame,
   getPauseReason,
   getSourceWithContent,
@@ -71,19 +72,23 @@ export class DebugLine extends PureCompo
 
     let { line, column } = toEditorPosition(frame.location);
     const { markTextClass, lineClass } = this.getTextClasses(why);
     doc.addLineClass(line, "line", lineClass);
 
     const lineText = doc.getLine(line);
     column = Math.max(column, getIndentation(lineText));
 
+    // If component updates because user clicks on
+    // another source tab, codeMirror will be null.
+    const columnEnd = doc.cm ? getTokenEnd(doc.cm, line, column) : null;
+
     this.debugExpression = doc.markText(
       { ch: column, line },
-      { ch: null, line },
+      { ch: columnEnd, line },
       { className: markTextClass }
     );
   }
 
   clearDebugLine(why: Why, frame: Frame, source: ?SourceWithContent) {
     if (!isDocumentReady(source, frame)) {
       return;
     }

--- a/devtools/client/debugger/src/components/Editor/Editor.css
+++ b/devtools/client/debugger/src/components/Editor/Editor.css
@@ -100,18 +100,17 @@ html[dir="rtl"] .editor-mount {
 .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) {
   z-index: 0;
 }
 
 .theme-dark .editor-wrapper .CodeMirror-line .cm-comment {
   color: var(--theme-comment);
 }
 
-.debug-expression,
-.debug-expression ~ .CodeMirror-widget {
+.debug-expression {
   background-color: var(--debug-expression-background);
 }
 
 .debug-expression-error {
   background-color: var(--debug-expression-error-background);
 }
 
 :not(.conditional-breakpoint-panel) .new-debug-line .CodeMirror-line {

--- a/devtools/client/debugger/src/utils/editor/index.js
+++ b/devtools/client/debugger/src/utils/editor/index.js
@@ -254,8 +254,17 @@ export function clearLineClass(codeMirro
 
 export function getTextForLine(codeMirror: Object, line: number): string {
   return codeMirror.getLine(line - 1).trim();
 }
 
 export function getCursorLine(codeMirror: Object): number {
   return codeMirror.getCursor().line;
 }
+
+export function getTokenEnd(codeMirror: Object, line: number, column: number) {
+  const token = codeMirror.getTokenAt({
+    line: line,
+    ch: column + 1
+  });
+
+  return token.end;
+}