I am using Visual Studio Code in Mac to do web programming.
I see we could use shift+cmd+v to launch a preview and cmd+k v to launch a preview in a separate window.
But once we modify code and save it, does anyone know how to reload and update the preview (by shortcut by preference)? Additionally, is it possible to automate the updates?
Moreover, I have opened the Debug panel, once I click on the green button, it lets me Select Environment:
Does anyone know which one I should choose to debug client side HTML+JavaScript programs?
1.) The "Preview" you mention is for Markdown files. Its not supposed to render a proper HTML preview, that's why it doesn't work or refresh. As soon as you use it with Markdown files, it updates / refreshes as you type.
But there are a couple of HTML preview extensions in the marketplace, just search for "HTML Preview" and you should be able to find some.
2.) None of those options in your screenshot, VSCode does not ship with a client side debugger by default.
But you can install Debugger for Chrome which uses Chromes debugging protocol. Detailed instructions on how to use it are in the extensions README.
Related
Can anyone explain these three debug symbols on VSCode I have found on the internet?
My vs code has the one with the play icon.
All demos online on debugging have the one in the middle. How do I get that?
Also, node js debugging is installed but I think it shows as disabled, with no option I can find to enable it.
To answer your question directly [TL;DR]: you already have it if you are using the latest version of vscode. It will take you to the same view as the one on the right
If you look at the codicon libray ref the middle one you pointed out is not present.
Visual Studio Code made changes in February 2020 ref that incorporates running and debugging to be something more harmonious:
User studies revealed that new users have difficulties finding how to run their programs in VS Code. One reason is that the existing "Debugging" functionality is not something that they relate to "Running" a program. For that reason, we are making "Run" more prominent in the UI.
The main menu Debug has become the Run menu.
The Run and Debug view has become the Run view and the corresponding Activity Bar icon now shows a large "Play" icon with a small "bug" decoration.
So in other words, there is no difference. The 'Run' and 'Debug' view is synonymous and the icon reflects those changes. As they noted, the Debug view is now called the 'Run' view, but it still offers debugging and breakpoints.
There are 2 possibilities you are running into however:
The tutorials and guides you are using are out-dated (showing an outdated version of vscode)
The tutorial or guide is using an extension that offers debugging capabilities. Extensions have some control over the icon you see
The extension is for single file debugging, according to the June 2020 ref notes, vscode recommends the following:
For debug extensions that want to improve the single file debug experience by adding a "Run" and/or "Debug" button to the editor, we recommend following these guidelines for a consistent look and feel:
Contribute Run and/or Debug commands in the package.json (see Mock Debug):
Use the command titles "Run File"/"Debug File" or "Run Python File"/"Debug Python File".
Use the $(play) icon for Run and $(debug-alt-small) for Debug.
Where their codicon library was updated in June to reflect the following:
As you can see, none of them are prefixed with verbiage like 'run', but they all represent the same functionality.
Additionally, you may see this icon as well:
This represents the panel (view) where the output of your debug will go.
I am building a chrome extension that is listening to messages coming from Chrome Dev Tools.
We are building a CI system and want to automate the following process:
Open DevTools and go to Elements pane.
Select node (see attached image - chrome1.png)
Select the Accessibility pane (see attached image - chrome2.png)
Are the above interactions possible using Puppeteer? My other option is to use Sikuli (http://www.sikuli.org/), although Puppeteer seems to be the right way to do things
-anurag
Doesn't appear to work. Here's my attempt:
https://glitch.com/edit/#!/puppeteer-open-console?path=server.js:25:3
Update
This prototype is just a test to see if you can open DevTools by triggering one of its keyboard shortcuts: Control+Shift+J. This doesn't appear to work.
However, one of the Puppeteer owners just told me that you can pass the devtools:true argument to puppeteer.launch() and that will enable you to open DevTools. Haven't tried it myself. He's not sure whether you can automate DevTools actions via Puppeteer. You might be able to get a reference to the DevTools window via browser.targets().
I'm trying to create an (ideally) all-in-one cross platform tile based map/sprite/image editor for a game engine, since the current official one is Windows only and doesn't play nicely with WINE/Mono. Instead of building one from scratch, I figured it might be easier to create an extension for Visual Studio Code, but side panes don't seem to be interactive, and I'm having trouble getting it to open an electron window.
Is this possible, or should I just build it from scratch with electron?
That won't work. Visual Studio Code is a code editor, which supports extensions that can either add functionality to the IDE itself or provide HTML content to show in an own pane. This is not enough (and not made) for a full featured editor-in-editor scenario (interaction is limited).
I've built an extension which has a graphical view of a graph (see the last image) using D3.js, with limited interaction capabilities (you can select/drag a node and pan/zoom with the mouse).
Better is probably to go level down and start with Electron (on which vscode is based). This would allow you to write any desktop application that can be written in HTML/JS.
I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.
I was wondering if there is a way to see a preview of an webpage page that we are working on in a web browser directly from the Visual Studio Code editor, instead of having to click the file to make it open by the default web browser.
You can open your Visual Studio Code project in a browser window by configuring a gulp task with the node module gulp-open. Then you can run the gulp task from inside Visual Studio Code.
Here's how you might configure the gulp task:
var open = require('gulp-open');
gulp.task('browser', function(){
// Define the source to match the file you wish to open:
gulp.src('./www/index.html')
// Designate the browser you wish the file opened in:
.pipe(open('<%file.path%>', {app: 'google-chrome'}));
});
});
Since we've named our task "browser", from inside Visual Studio Code we can hit command/control P to bring up the command pallet and type task. Then start to type browser. You should see code complete for the full task as you type. Hit return and it will open the your file in the browser you designate. Once the browser is open, you can resize it and Visual Studio Code so that they are side by side. Then as you work you can refresh the browser to see your changes.
You can consult the docs for gulp-open on NPM.
Directly from the editor, there are WYSIWYG editors such as Adobe Dreamweaver, Kompozer, etc. Though these often offer a poor preview of anything beyond simple HTML and CSS (i.e. no JS, no animations, possibly different CSS support).
Using a text editor such as the Visual Studio Code Editor, Sublime Text or vim, there is no such preview function.
Ideally, you'd want to test in the browser (the browsers you'd expect your target audience to be using) to ensure you have an idea of what exactly your visitors will see.
To save time between coding and previewing, you could simply keep the window/tab open in Chrome/Firefox/Edge and refresh after saving the file in the editor.