Black bar on right when developer tools is opened

%3CLINGO-SUB%20id%3D%22lingo-sub-1821503%22%20slang%3D%22en-US%22%3EBlack%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1821503%22%20slang%3D%22en-US%22%3E%3CP%3EAnyone%20seen%20where%20a%20blank%20black%20bar%20appears%20on%20the%20right%20hand%20side%20when%20developer%20tools%20is%20opened%3F%20It's%20something%20coming%20from%20the%20browser's%20chrome%2C%20as%20it%20doesn't%20show%20as%20being%20part%20of%20the%20%20element%20when%20inspected%20in%20developer%20tools.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22keeganwitt_0-1603767622436.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F229434iC235130D13E128E6%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22keeganwitt_0-1603767622436.png%22%20alt%3D%22keeganwitt_0-1603767622436.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20happening%20on%20the%20Dev%20channel%20on%20both%20MacOS%20and%20Windows%2010%20for%20me.%20It%20is%20not%20happening%20on%20the%20Stable%20channel.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823336%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823336%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F588079%22%20target%3D%22_blank%22%3E%40keeganwitt%3C%2FA%3E%20That's%20interesting%2C%20what%20platform%20have%20you%20taken%20the%20screenshot%3F%20For%20me%20there%20is%20no%20black%20bar%20and%20the%20DevTools%20manager%20comes%20on%20the%20side%2C%20not%20the%20bottom.%20Maybe%20it's%20a%20placeholder%20for%20an%20upcoming%20feature.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823528%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823528%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F565232%22%20target%3D%22_blank%22%3E%40Kam%3C%2FA%3E%26nbsp%3BThe%20screenshot%20was%20on%20Windows%2C%20but%20I've%20observed%20the%20problem%20on%20both%20Windows%2010%20and%20MacOS.%26nbsp%3B%20Dev%20tools%20is%20on%20the%20right%20I%20think%20by%20default%2C%20but%20you%20can%20pin%20it%20to%20left%2C%20right%2C%20or%20bottom%2C%20or%20pop%20it%20out%20into%20it's%20own%20window.%20Chrome%20has%20had%20that%20ability%20for%20years.%20Click%20the%203%20dots%20next%20to%20X%20and%20select%20%22Dock%20side%22%20to%20change%20that.%20If%20it%20is%20docked%20on%20the%20right%2C%20it%20covers%20the%20bar%2C%20so%20it%20seems%20there's%20some%20code%20assuming%20it's%20gonna%20be%20on%20the%20right.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22keeganwitt_0-1603814630309.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F229542iF7021BAD0806C001%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22keeganwitt_0-1603814630309.png%22%20alt%3D%22keeganwitt_0-1603814630309.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823566%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823566%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F588079%22%20target%3D%22_blank%22%3E%40keeganwitt%3C%2FA%3E%26nbsp%3BHere's%20how%20it%20looks%20for%20me%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Kam_0-1603814758320.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F229543i7783EABA3CF4CC82%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Kam_0-1603814758320.png%22%20alt%3D%22Kam_0-1603814758320.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAre%20you%20asking%20why%20it%20looks%20black%3F%20It's%20because%20I%20enabled%20a%20secret%20flag%20%3A)%3C%2Fimg%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823573%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823573%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F565232%22%20target%3D%22_blank%22%3E%40Kam%3C%2FA%3E%26nbsp%3BThat's%20still%20got%20the%20dev%20tools%20on%20the%20right.%20What%20does%20it%20look%20like%20for%20you%20when%20you%20dock%20the%20tools%20at%20the%20bottom%3F%3C%2FP%3E%3CP%3EI%20also%20disabled%20vertical%20tabs.%20That%20didn't%20seem%20to%20make%20a%20difference.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823574%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823574%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F588079%22%20target%3D%22_blank%22%3E%40keeganwitt%3C%2FA%3E%20How%20do%20I%20do%20that%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1823575%22%20slang%3D%22en-US%22%3ERe%3A%20Black%20bar%20on%20right%20when%20developer%20tools%20is%20opened%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1823575%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F565232%22%20target%3D%22_blank%22%3E%40Kam%3C%2FA%3E%26nbsp%3BThe%203%20dots%20button%20to%20the%20left%20of%20the%20close%20button%20that's%20on%20the%20dev%20tools.%20It's%20a%20little%20hard%20to%20see%20in%20you%20screen%20because%20it's%20black%2C%20but%20it's%20there.%20That's%20what%20my%20second%20picture%20shows.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Anyone seen where a blank black bar appears on the right hand side when developer tools is opened? It's something coming from the browser's chrome, as it doesn't show as being part of the <html> element when inspected in developer tools.

 

keeganwitt_0-1603767622436.png

 

This is happening on the Dev channel on both MacOS and Windows 10 for me. It is not happening on the Stable channel.

15 Replies
Highlighted
@keeganwitt That's interesting, what platform have you taken the screenshot? For me there is no black bar and the DevTools manager comes on the side, not the bottom. Maybe it's a placeholder for an upcoming feature.
Highlighted

@Kam The screenshot was on Windows, but I've observed the problem on both Windows 10 and MacOS.  Dev tools is on the right I think by default, but you can pin it to left, right, or bottom, or pop it out into it's own window. Chrome has had that ability for years. Click the 3 dots next to X and select "Dock side" to change that. If it is docked on the right, it covers the bar, so it seems there's some code assuming it's gonna be on the right.

keeganwitt_0-1603814630309.png

 

Highlighted

@keeganwitt Here's how it looks for me:

Kam_0-1603814758320.png

Are you asking why it looks black? It's because I enabled a secret flag :) 

 

Highlighted

@Kam That's still got the dev tools on the right. What does it look like for you when you dock the tools at the bottom?

I also disabled vertical tabs. That didn't seem to make a difference.

Highlighted
Highlighted

@Kam The 3 dots button to the left of the close button that's on the dev tools. It's a little hard to see in you screen because it's black, but it's there. That's what my second picture shows.

Highlighted

Yeah, it doesn't make a difference, @keeganwitt.

Kam_0-1603815646963.png

How can we fix this?

Highlighted

I enabled it and I have the same problem.

Kam_0-1603815803714.png

 

Highlighted

@Kam OK, so it is a bug for sure then. I've reported this via "Send Feedback".

Highlighted
Highlighted

@Kam we are tracking this one in the Chromium bug database as well (thanks so much for sending feedback!): https://bugs.chromium.org/p/chromium/issues/detail?id=1135885

 

-John

Highlighted

@johnjansen You're welcome!

Highlighted

@johnjansen Edge Dev must be based on a slightly different build than Chrome Dev, as I don't see it there. I see Edge Dev version is 88.0.673.0 and Chrome Dev version is 88.0.4302.0. Are those numbers comparable? Or are they not necessarily the same thing other than the major version?

Highlighted

Looks today's update had the fix. Yay!

Highlighted