DevTools Lost Syntax Highlighting for JavaScript #7372

qingxiang-jia · 2019-12-12T22:30:13Z

Description

The dev tool ("Sources" tab) lost syntax highlighting for JavaScript.

Steps to Reproduce

Open any website with JavaScript.
Ctrl+Shift+I to open dev tools.
Go to "Sources" tab and Ctrl+P to open any .js file.

Actual result:

No highlighting for JavaScript.

Expected result:

Has highlighting for JavaScript just like Chrome or Firefox.

Reproduces how often:

Always happens after 12:00PM (PST) today (12/12/2019).

Brave version (brave://version info)

Brave	1.1.20 Chromium: 79.0.3945.74 (Official Build) (64-bit)
Revision	99b6d241cf84f7fa7434ae8a59f9e74eb1464280-refs/branch-heads/3945@{#888}
OS	Windows 10 OS Version 1803 (Build 17134.1130)

Version/Channel Information:

Can you reproduce this issue with the current release? Yes
Can you reproduce this issue with the beta channel? Yes
Can you reproduce this issue with the dev channel? Didn't try.
Can you reproduce this issue with the nightly channel? Didn't try.

Other Additional Information:

Does the issue resolve itself when disabling Brave Shields? No.
Does the issue resolve itself when disabling Brave Rewards? No.
Is the issue reproducible on the latest version of Chrome? No.

Miscellaneous Information:

The text was updated successfully, but these errors were encountered:

bsclifton · 2019-12-13T06:37:17Z

Thanks for the report, @qingxiang-jia 😄 I'm going to close this as a duplicate report of #5618

This issue is fixed in Developer and Nightly versions of the product (NOTE: you have to enable remote debugging under brave://settings/privacy). I created a pull request just right now to uplift this to our Beta branch (1.2, shipping January 6th) since there have been a recent bump in requests:
brave/brave-core#4228

qingxiang-jia · 2019-12-13T19:25:00Z

Hi @bsclifton , in fact, this issue is not solved in the latest Developer edition. I will check if it's fixed in the nightly. Note that this is not exactly the same as the linked bug because this one deals with JavaScript, the other one deals with TypeScript.

Brave	1.3.64 Chromium: 79.0.3945.79 (Official Build) dev (64-bit)
Revision	29f75ce3f42b007bd80361b0dfcfee3a13ff90b8-refs/branch-heads/3945@{#916}
OS	Windows 10 OS Version 1803 (Build 17134.1130)

qingxiang-jia · 2019-12-13T19:28:14Z

Hi @bsclifton , I just checked the latest nightly build, this bug is not fixed. I think we should reopen this issue.

Brave	1.4.21 Chromium: 79.0.3945.74 (Official Build) nightly (64-bit)
Revision	99b6d241cf84f7fa7434ae8a59f9e74eb1464280-refs/branch-heads/3945@{#888}
OS	Windows 10 OS Version 1803 (Build 17134.1130)

bsclifton · 2019-12-13T22:01:29Z

@qingxiang-jia did you go to brave://settings/privacy and enable Remote Debugging?

qingxiang-jia · 2019-12-13T22:36:52Z

Hi @bsclifton , thanks for pointing out that. Yes, I indeed forgot to turn on remove debugging. After that, the syntax highlighting works as expected.

bsclifton · 2019-12-13T22:41:06Z

@qingxiang-jia perfect! Thanks for confirming 😄 It's definitely not an obvious thing to do

cc: @rebron in case we could provide an easier way to enable remote debugging (ex: show it in dev tools)

czzplnm · 2019-12-24T06:55:50Z

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

qingxiang-jia · 2019-12-24T19:46:36Z

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

czzplnm · 2019-12-24T20:37:03Z

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

I thought that was for debugging android web apps. I use chrome to debug my android app that has a webview.

qingxiang-jia · 2019-12-25T04:50:45Z

So the default behavior of Brave will have code highlighting disabled, and we will have to turn on Remote Debugging now? :(

I have the same feeling. Also, after some googling I am not sure what "remote debugging" really is. Chromium doesn't seem to have it.

I thought that was for debugging android web apps. I use chrome to debug my android app that has a webview.

OK. Thanks! I didn't find it in Chrome's setting. Maybe I went to a wrong place. Good to know!

bsclifton · 2019-12-26T20:39:41Z

Chrome doesn't offer this setting because it because it's enabled by default (it's a setting we created at Brave). Here's the raw Chromium source, so you can see what's happening:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/devtools_ui_data_source.cc?l=135-150&rcl=50e069330205da34c2ff8a234e155a92e128834b

Basically, if remote debugging (in Brave) is disabled, it won't allow execution of StartRemoteDataRequest.

Here's the Chromium annotation for this call, which describes the call that StartRemoteDataRequest is making:

net::NetworkTrafficAnnotationTag traffic_annotation =
  net::DefineNetworkTrafficAnnotation("devtools_hard_coded_data_source",
                                      R"(
    semantics {
      sender: "Developer Tools Remote Data Request From Google"
      description:
        "This service fetches Chromium DevTools front-end files from the "
        "cloud for the remote debugging scenario."
      trigger:
        "When user attaches to mobile phone for debugging."
      data: "None"
      destination: GOOGLE_OWNED_SERVICE
    }
    policy {
      cookies_allowed: YES
      cookies_store: "user"
      setting: "This feature cannot be disabled by settings."
      chrome_policy {
        DeveloperToolsAvailability {
          policy_options {mode: MANDATORY}
          DeveloperToolsAvailability: 2
        }
      }
    })");

Even if you're debugging local files, it's going to make a call to fetch "Chromium DevTools front-end files from the cloud" and will send cookies, which has privacy violating implications (which is why it's disabled).

We can definitely look at making this safer- for example adding a proxy in-between, which strips out user identifying information. Hope this makes sense; I know it's an inconvenience ☹️

cc: @jumde @diracdeltas @fmarier

bsclifton · 2019-12-26T20:45:31Z

We could always consider adding a checkbox in the Sources tab of the dev tools, something like Allow calls to Google for fetching front-end files (or something better named):

qingxiang-jia · 2019-12-26T21:12:37Z

Thank you for the detailed explanation. I never realized we are sending cookie by using the dev tools until your comment! Now I understand the privacy implication I think it's great that we have the option to switch off it and I feel more important to keep using Brave. Yes, I think adding something in the red square would be a good idea.

czzplnm · 2019-12-27T03:04:29Z

Chrome doesn't offer this setting because it because it's enabled by default (it's a setting we created at Brave). Here's the raw Chromium source, so you can see what's happening:
https://cs.chromium.org/chromium/src/chrome/browser/ui/webui/devtools_ui_data_source.cc?l=135-150&rcl=50e069330205da34c2ff8a234e155a92e128834b

Basically, if remote debugging (in Brave) is disabled, it won't allow execution of StartRemoteDataRequest.

Here's the Chromium annotation for this call, which describes the call that StartRemoteDataRequest is making:
net::NetworkTrafficAnnotationTag traffic_annotation =
  net::DefineNetworkTrafficAnnotation("devtools_hard_coded_data_source",
                                      R"(
    semantics {
      sender: "Developer Tools Remote Data Request From Google"
      description:
        "This service fetches Chromium DevTools front-end files from the "
        "cloud for the remote debugging scenario."
      trigger:
        "When user attaches to mobile phone for debugging."
      data: "None"
      destination: GOOGLE_OWNED_SERVICE
    }
    policy {
      cookies_allowed: YES
      cookies_store: "user"
      setting: "This feature cannot be disabled by settings."
      chrome_policy {
        DeveloperToolsAvailability {
          policy_options {mode: MANDATORY}
          DeveloperToolsAvailability: 2
        }
      }
    })");
Even if you're debugging local files, it's going to make a call to fetch "Chromium DevTools front-end files from the cloud" and will send cookies, which has privacy violating implications (which is why it's disabled).

We can definitely look at making this safer- for example adding a proxy in-between, which strips out user identifying information. Hope this makes sense; I know it's an inconvenience ☹️

cc: @jumde @diracdeltas @fmarier

Thanks for the detailed explanation

bsclifton · 2020-01-07T22:22:34Z

Issue created to proxy these calls and enable the setting by default:
#7645

bsclifton closed this as completed Dec 13, 2019

bsclifton added the closed/duplicate Issue has already been reported label Dec 13, 2019

eljuno mentioned this issue Dec 24, 2019

Javascript debugging no longer has color highlighting(Inspect Element) #7517

Closed

bsclifton mentioned this issue Jan 7, 2020

Remote debugging should be proxied and enabled by default #7645

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DevTools Lost Syntax Highlighting for JavaScript #7372

DevTools Lost Syntax Highlighting for JavaScript #7372

qingxiang-jia commented Dec 12, 2019

bsclifton commented Dec 13, 2019

qingxiang-jia commented Dec 13, 2019 •

edited

Loading

qingxiang-jia commented Dec 13, 2019

bsclifton commented Dec 13, 2019 •

edited

Loading

qingxiang-jia commented Dec 13, 2019

bsclifton commented Dec 13, 2019

czzplnm commented Dec 24, 2019

qingxiang-jia commented Dec 24, 2019

czzplnm commented Dec 24, 2019

qingxiang-jia commented Dec 25, 2019

bsclifton commented Dec 26, 2019 •

edited

Loading

bsclifton commented Dec 26, 2019

qingxiang-jia commented Dec 26, 2019

czzplnm commented Dec 27, 2019

bsclifton commented Jan 7, 2020

DevTools Lost Syntax Highlighting for JavaScript #7372

DevTools Lost Syntax Highlighting for JavaScript #7372

Comments

qingxiang-jia commented Dec 12, 2019

Description

Steps to Reproduce

Actual result:

Expected result:

Reproduces how often:

Brave version (brave://version info)

Version/Channel Information:

Other Additional Information:

Miscellaneous Information:

bsclifton commented Dec 13, 2019

qingxiang-jia commented Dec 13, 2019 • edited Loading

qingxiang-jia commented Dec 13, 2019

bsclifton commented Dec 13, 2019 • edited Loading

qingxiang-jia commented Dec 13, 2019

bsclifton commented Dec 13, 2019

czzplnm commented Dec 24, 2019

qingxiang-jia commented Dec 24, 2019

czzplnm commented Dec 24, 2019

qingxiang-jia commented Dec 25, 2019

bsclifton commented Dec 26, 2019 • edited Loading

bsclifton commented Dec 26, 2019

qingxiang-jia commented Dec 26, 2019

czzplnm commented Dec 27, 2019

bsclifton commented Jan 7, 2020

qingxiang-jia commented Dec 13, 2019 •

edited

Loading

bsclifton commented Dec 13, 2019 •

edited

Loading

bsclifton commented Dec 26, 2019 •

edited

Loading