Bug 214611 – Web Inspector: Sources tab empty, sidebar nonfunctional

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Jeff Johnson]

Overview:
Under some circumstances, the Sources tab in broken in the Web Inspector. The tab is empty, and the left sidebar button doesn't do anything.

Steps to Reproduce:
1. Open Safari Preferences and set New windows open with: Empty Page
2. Open new window in Safari
3. Select "Inspect Element" from the contextual menu
4. Open https://www.cnn.com
5. Select "Sources" tab

Versions:
This happens with Safari Version 13.1.2 (14609.3.5.1.5) and Safari Technology Preview Release 108 (Safari 13.2, WebKit 14610.1.16.3) on macOS 10.14.6 (18G6020).

Additional Information:
If I inspect the web inspector itself using WebKitDebugDeveloperExtrasEnabled, I see the following errors in the web inspector console for Safari 13.1.2

[Error] TypeError: null is not an object (evaluating 'this._issueMessage.sourceCodeLocation.displayLineNumber')
	_updateTitles (Main.js:18996)
	IssueTreeElement (Main.js:18992:181)
	_addIssue (Main.js:24293)
	_addIssuesForSourceCode (Main.js:24307)
	_addResource (Main.js:24216:161)
	_addResourcesRecursivelyForFrame (Main.js:24218)
	_handleResourceGroupingModeChanged (Main.js:24416)
	SourcesNavigationSidebarPanel (Main.js:24079:100)
	navigationSidebarPanel (Main.js:11832)
	shown (Main.js:12038)
	prepareToShow (Main.js:2920)
	_showEntry (Main.js:16069)
	showBackForwardEntryForIndex (Main.js:16004)
	showContentView (Main.js:15999)
	_tabBarItemSelected (Main.js:9515)
	dispatch (Main.js:188:149)
	dispatchEventToListeners (Main.js:190)
	selectTabBarItem (Main.js:11050:117)
	_handleMouseDown (Main.js:11108)
	_handleMouseDown
[Error] TypeError: undefined is not an object (evaluating 'this.contentBrowser.currentContentView')
	(anonymous function) (Main.js:24194)

And similar for Safari Tech Preview 108:

[Error] TypeError: null is not an object (evaluating 'this._issueMessage.sourceCodeLocation.displayLineNumber')
	_updateTitles (Main.js:18958)
	IssueTreeElement (Main.js:18954:181)
	_addIssue (Main.js:24333)
	_addIssuesForSourceCode (Main.js:24347)
	_addResource (Main.js:24247:161)
	_addResourcesRecursivelyForFrame (Main.js:24249)
	_handleResourceGroupingModeChanged (Main.js:24455)
	SourcesNavigationSidebarPanel (Main.js:24094:100)
	navigationSidebarPanel (Main.js:11711)
	shown (Main.js:11916)
	prepareToShow (Main.js:2925)
	_showEntry (Main.js:16059)
	showBackForwardEntryForIndex (Main.js:15994)
	showContentView (Main.js:15989)
	_tabBarItemSelected (Main.js:9557)
	dispatch (Main.js:189:149)
	dispatchEventToListeners (Main.js:191)
	selectTabBarItem (Main.js:9355:117)
	_handleTabContainerMouseDown (Main.js:9423)
	_handleTabContainerMouseDown
[Error] TypeError: undefined is not an object (evaluating 'this.contentBrowser.currentContentView')
	(anonymous function) (Main.js:24225)

[Jeff Johnson]

Created attachment 404850 [details]
Screenshot

[Radar WebKit Bug Importer]

<rdar://problem/65898051>

[Greg Marriott]

Can you try with the latest Safari Technical Preview? I couldn't reproduce this in 109.

[Greg Marriott]

*Technology... stupid autocorrect

[Jeff Johnson]

Unfortunately STP 109 is not available for macOS 10.14

[Greg Marriott]

Can you try with the Safari 14 beta?

[Jeff Johnson]

Created attachment 404891 [details]
Minimal test case

This example reproduces the problem in Safari 13.1.2 on macOS 10.15.6

[Jeff Johnson]

I can't install the beta, but I found a reproduction case that works in the latest Safari on Catalina.

I debugged the web inspector and found that this._issueMessage had _text: "Failed to load resource: Could not connect to the server." From there, it was essentially a process of elimination.

The reason I was seeing the problem with cnn.com is that I have Little Snitch installed (on Mojave) and configured to block a bunch of advertising/tracking domains.

My reduced test case simply loads an iframe with a 404 src from example.org

[Greg Marriott]

Nice. Repro achieved.

[Blaze Burg]

Created attachment 404936 [details]
Proposed fix

I'm still running a build to test this out myself, but this is the anticipated fix for the issue.

[Devin Rousso]

Comment on attachment 404936 [details]
Proposed fix

View in context: https://bugs.webkit.org/attachment.cgi?id=404936&action=review

r=me, looks reasonable

> Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js:64
> +            var lineNumberLabel;

NIT: this can be `let` too :)

> Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js:70
> +            this.mainTitle = `${lineNumberLabel} ${this._issueMessage.text}`;

NIT: I personally prefer not using a template string for simple combinations like this, as it's harder to notice the space vs when it's explicitly done as `" "` with an addition

[EWS]

Committed r264717: <https://trac.webkit.org/changeset/264717>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 404936 [details].