search

urin / vscode-web-visual-editor

Edit HTML files visually.
https://marketplace.visualstudio.com/items?itemName=Urin.vscode-web-visual-editor
MIT License
501 stars 5 forks source link

[Request]: Need a way to open Dev Tools Pane #4

Open mbennette68 opened 1 week ago

mbennette68 commented 1 week ago

Hi,

Is there a way to open a Dev Tools Pane similar to the below image taken from another extension. If not this would be a useful feature to add so that JavaScript console.log() output can be seen. dev_tools_pane_2024-10-14 21-42-25

I also suggest that the Tool Bar (highlighted in green below) of the Visual Web Editor should have the ability to be hidden and/or moved to the other side:

dev_tools_pane_2024-10-14 22-03-25_2

Thank you, MB

urin commented 1 week ago

Please create other issue for toolbar enhancement.

mbennette68 commented 1 week ago

Ok,

New issue has been created :)

urin commented 4 days ago

Is there a way to open a Dev Tools Pane similar to the below image taken from another extension.

I don't know how to do that. Which specific extension are you referring to?

mbennette68 commented 4 days ago

Hello,

Refer to the following image for labels. The other extension is called, "Live Preview, boxed in Lavander or Pink color." Clicking on the hamburger, boxed in green will reveal the option, Open Devtool Pane, boxed in Light Blue color. Clicking on that will activate the Dev Tools Pane, boxed in Red Color.

Basically, it's just like Right-Clicking on a Firefox page and choosing, Inspect.

It's just difficult on most of the tools that have this features to easily access the Inspect functionality of browsers. It should be just easy as a keyboard short cut or Right-Clicking on the live preview page.

vs_codium_cropped_2024-10-19 12-39-01

Thank you, MB