Contributing to Chrome DevTools. Can't see the source code

[Oleksii Kadurin]

Hi! I'm following the steps from here: "Regular Dev: DevTools Frontend Development" (https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro/edit#heading=h.9t7np5fa400).

And it seems I do something wrong. I can't see the source code of the Devtools. I can see just minified files.

So I

1) run the server (npm run server) like it's described in the section "Run Chrome with your own DevTools front-end"

2) added the chrome.exe (Canary) to the PATH

3) run the command from the section "Run Chrome with remote debugging on":

chrome --remote-debugging-port=9222 --no-first-run \ --user-data-dir="$TMPDIR/chrome-profile" \ http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true https://devtools.chrome.com

After that a Chrome browser was opened and I could see multiple tabs in there. On of them has the title "Inspectable pages", another - "Chrome Devtools | Web | Google Developers". (1.jpg)

Then as I understand I should click on the item. But it's not clear what item in the "Inspectable pages" I should click. If clicking the "Inspectable pages" item then it shows the Devtools page

like the whole page is the devtools. But when I open the real devtools (F12) if shows the popup message: "Websocket disconnected". (2.jpg)

If clicking the "https://devtools.chrome.com/" item then I can open the real Devtools but the source code in the Source tab is all minified. (3.jpg)

===

My questions are:

1) Why can't I see the source code?

2) It seems I can start chrome with all that --remote-debugging-port=9222 keys from the step (3) without running the server from the step (1).

What'd the difference? Why can't I see it?

Thanks for reply!

[Jason Laster]

Hi Oleksii, you’re really close!

try

1. open chrome w/ the cli command

2. open a new tab and go to http://todomvc.com/examples/vanillajs/ 

3. refresh the inspectable tabs page and click on the todomvc item

You should now see a local version of chrome devtools running for todomvc.

Note, if you open devtools on the todomvc page you’ll see the websocket connection dropped because the devtools server only supports one connection.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/de696430-2154-415e-984d-3b647afdf6fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Will Chen]

Hi Oleksii -

Running the server on port 8090 allows you to use your local copy (e.g. git checkout) of devtools. If you notice in the command to launch chrome, the "localhost:8090" is added after the hash which tells Chrome that whatever page you're inspecting, to use devtools from localhost:8090, which is a simple static file server for your devtools repo. Otherwise, you wouldn't be able to see changes that you made in devtools in the UI because by default Chrome is using the devtools baked in.

- Will

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/de696430-2154-415e-984d-3b647afdf6fb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/CAH_2F5H4S51XLOe57rkfjpSdJYAKn2O%3D6L%3Dazzu9fM9hkONzvA%40mail.gmail.com.

[Oleksii Kadurin]

Hi Jason! Thanks a lot for help! I did what you wrote and I can see the chrome devtools as a web-page (4.jpg).
However when I open the real devtools on that page, the source code for the devtools is all minified. You can check it on the picture I attached.
Is it a way to get non-minified source code of chrome devtools in the source tab?

Also docs says:

Iterating: If the save & refresh dance gets tiring to you, (and it should, you're a tooling geek gosh darn it!), you can use the Workspaces feature to load the frontend, and map the network to the filesystem.

 What directory path should I map to the source code in there? I feel that I should see the non-minified source code in the Source tab of the real devtools. Then it would have more sense to map it to the source code in the directory.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

[Oleksii Kadurin]

Hi Will! Local server running hosts the devtools app. I see it now, thanks! Maybe you can answer why I see the code for the in the devtools (real F12) for devtools (app) in the Source tab minified? And how can I map the code in the Source tab to the source code in my directories using workspace? Thanks!

[Oleksii Kadurin]

I've mapped the "http://localhost:9222/devtools/" to "C:/chromium3/src/third_party/WebKit/Source/devtools" (my chromium location). But it still uses minified files like "http://localhost:9222/devtools/inspector.js".
Any idea how to make it use non-minified source code from? Thanks!

[Oleksii Kadurin]

Also i tried to access some js files directly as a path next to "http://localhost:9222/devtools". So I tried to request "http://localhost:9222/devtools/front_end/audits2_worker/Audits2Service.js". The server responses with the code 200. But there's no response body. (6.jpg)

[Will Chen]

Hi Oleksii -

You need to inspect the page from http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true in order to use the debug version of devtools (e.g. non-minified and non-bundled).

I'm working on simplifying these steps and will update the docs soon. You can try using "npm start" which launches both chrome canary with the right flags and starts the server and "npm run chrome" which just launches the browser. We're updating this development workflow, so it's a bit rough around the edges. Thanks for your patience.

- Will

On Wed, Nov 9, 2016 at 7:20 AM, Oleksii Kadurin <ovka...@gmail.com> wrote:

Also i tried to access some js files directly as a path next to "http://localhost:9222/devtools". So I tried to request "http://localhost:9222/devtools/front_end/audits2_worker/Audits2Service.js". The server responses with the code 200. But there's no response body. (6.jpg)

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/5e619e2f-9952-4b3e-80fd-135a5e7f4216%40googlegroups.com.

[Oleksii Kadurin]

Thanks a lot for your input, Will. I can't check it out right now (I will do it tomorrow). And I have a quick question to what you wrote. 
So saying that 

You need to inspect the page from http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true

do you mean that I should press F12 to open devtools when the browser address bar contains URL  http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true ?
Like having the page that is displayed here (1.jpeg from my very first post) i just should press F12, and I will be able to see the unminified source code?

Or you mean that having the page that is displayed here (the same one mentioned above), I should select the item with the name 

Inspectable Pages

http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true

and only then open F12 (real devtools)?

[Will Chen]

It's the second way you've said. On that page from the image you've shown, click on the item for the page you want to inspect and then open devtools.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/a1033d14-940a-4b3c-bb0a-0449c3970e6d%40googlegroups.com.

[Oleksii Kadurin]

Ok. Thanks! I will try.

[Oleksii Kadurin]

Hi Will! I've tried to do what you suggested (as I understand it). Also I recorder my attemptions into the animated gifs (I attach them to the post).
So the first time (devtools.gif) I clicked on the http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true items and tried to open the devtools. It complained that Websocket Disconnected. 
In the second attemption I selected another the web-page (devtools2.gif) and there I opened the devtools. The source code of devtools seems still minified and boundled. 
It would be really great if you have a time to take a look at those gif-files and tell me what I do wrong. 
Thanks a lot!

[Oleksii Kadurin]

Sorry, my gifs became corrupted when attaching them in the previous post. So I uploaded them into the Google Drive and here they are:
1) The case when I selected http://localhost:9222#http://localhost:8090/front_end/inspector.html?experiments=true : 
https://lh6.googleusercontent.com/WhnrgvFcbq3J2Nbeo5qMNijroNKqqlYdLo3Jc-bcCCQ4yx_NMdmgmYfrksyILELUULs813nYuG9y0bI=w1920-h950-rw

2) The case when I selected another page: 
https://lh6.googleusercontent.com/ot1rfcq8kvRzU4Wz4B9fwWAmf8I-3x2wzK5CxpeUkGg75Y9qESz_oGQDHTbLWmwQBXxcs9MAwJpOcjo=w1920-h950-rw

[Will Chen]

Hi Oleksii -

We recently updated the development workflow and I noticed from your gifs it looks like it's still using the old workflow, which makes me think you're running on an older version of Chrome or DevTools (chromium checkout). Can you pull from tip of tree (e.g. git pull --rebase origin master) and then re-run the commands? Also, can you go to "chrome://version/" and paste me your Google Chrome Canary version (e.g. Google Chrome 54.0.2840.90 (Official Build) (64-bit))? If you're using Canary, it should be updated daily, but I just wanted to double-check.

The new development workflow looks like this, and it's similar to before but you need to copy the link and then paste it in the address bar:

Best,

Will

[Oleksii Kadurin]

Hi Will! It seem that in my previous post I specified not valid links once again. So first I will re-post them (those animated gifs) just in case:
https://drive.google.com/file/d/0ByC_JXfGJgxcMGV6cl9JWlZCOVE/view?usp=sharing
https://drive.google.com/file/d/0ByC_JXfGJgxcRkZtVHotTklVOVE/view?usp=sharing

And here is the link to animated gif of my the very last attempts: https://drive.google.com/file/d/0ByC_JXfGJgxcZFgwaG82TG5ubmc/view?usp=sharing

I updated the git by the command you provided and the version of Chrome Canary being opened is Version 56.0.2915.0 canary (64-bit).
But still it seems I do something wrongly.

Thank you for help!

[Will Chen]

Hi Oleksii -

Thanks for the GIFs. Please use "npm run chrome" to start chrome (or use "npm start" which launches both chrome and the development server). We added a new flag to chrome "--custom-devtools-frontend=http://localhost:8090/front_end/" which was missing from our contribution guide instructions. I've updated our contribution guide to point people to just use our npm commands which is simpler to use.

Thanks for your patience.

Best,

Will

[tunec...@gmail.com]

Hi.

I just got the latest version of dev tools and found that there is still an issue.

"npm start" is still launching http://localhost:9222/#custom=true&experiments=true by default but it should launch http://localhost:9222/#http://localhost:8090/front_end/inspector.html?experiments=true instead.

When I manually navigate to http://localhost:9222/#http://localhost:8090/front_end/inspector.html?experiments=true it all works great!

This is the "npm start" chrome args from the master branch at the time of this comment 

--remote-debugging-port=9222 

--custom-devtools-frontend=http://localhost:8090/front_end/ 

--no-first-run 

--enable-devtools-experiments http://localhost:9222#custom=true&experiments=true https://devtools.chrome.com 

--user-data-dir=D:\dev\google\chromium\src\third_party\WebKit\Source\devtools\.dev_profile

Thanks

Peter

[tunec...@gmail.com]

This fixes the chrome start command in scripts/chrome_debug_launcher/launch_chrome.js

var chromeArgs = [

    `--remote-debugging-port=${REMOTE_DEBUGGING_PORT}`,

    `--custom-devtools-frontend=http://localhost:${SERVER_PORT}/front_end/`,

    `--no-first-run`,

    '--enable-devtools-experiments',

    `http://localhost:${REMOTE_DEBUGGING_PORT}#http://localhost:${SERVER_PORT}/front_end/inspector.html?custom=true&experiments=true`,

    `https://devtools.chrome.com`,

    `--user-data-dir=${CHROME_PROFILE_PATH}`

[Oleksii Kadurin]

Thank you guys! I will try it out on Monday.

[Oleksii Kadurin]

Hi! Eventually I can see the source code. That's great :) Thanks all for input!
Just one small question. When I open the devtools for devtools I see the error message: "Uncaught ReferenceError: DevToolsAPI is not defined". What does that error mean? Is it critical? 
Here's the animated gif where you can see that error: https://drive.google.com/file/d/0ByC_JXfGJgxcTWpsN05VZUxuaUE/view?usp=sharing

[Will Chen]

Hey Peter -

We switched to using http://localhost:9222/#custom=true&experiments=true because our previous version of hosted mode (e.g. development mode) doesn't enable all the functionality of DevTools.

I tried using both the old and new URL and can load DevTools on DevTools for both, but our recommendation is to use what "npm start" launches.