Chrome Devtools Workspace 2.0 loses syncing with CSS files after reload - google-chrome-devtools

I have added the local folder into the "Filesystem" tab of the Workspace. I see the CSS file I need to edit with the green badge (the linked icon) as shown on the screenshot below. As I make the changes, I see them being reflected on the page. However, as soon as I refresh the page, the linking just disappear just for the file I have edited. But as soon as I upload the file to the server, then the linking starts working until another refresh.
Am I missing something? Is there a setting that I need to do?

Chrome was not able to store persistent changes on version 63. They have introduced something called overrides with version 64.

Figured this frustrating thing out as an annoying side effect is that once you loose the mapping breakpoints stop working and the only solution was to reloading Chrome.
It appears sync is lost when using multiple Chrome DevTools trick as per here: https://stackoverflow.com/a/55507080/913223 .
The work around is to re-open the file using CTRL+P command palette. Notice in the screenshot below the file is duplicated, opening the virtual one re-connects mapping and brings back the green icon.

Related

vscode settings pane is blank

For some reason, my vscode is no longer showing any settings in the UI settings pane. I can still open my settings.json, but even with my settings editor set to "workbench.settings.editor": "ui", I still get this:
I'm on macOS Catalina version 10.15.7 and vscode version 1.52.1
Any ideas on what might be causing this? Should I make a backup of my settings files and then reset the settings to default?
I was having this exact same issue recently, so I was a little disappointed when there were no solutions. I did not have my settings editor set to "workbench.settings.editor": "ui",as you had, so I tried doing that, but after restarting vscode it didn't appear to do anything.
I've been working in the same folder for a while now, so I tried toggling to a different folder to see if somehow that would kickstart vscode into displaying the settings pane. That did not work, but when I toggled back to the folder that I was originally in, the settings pane was now populating with the normal settings for User and Workspace.
A little bit more troubleshooting and it seems like if I have the settings pane already open in the workspace when the workspace loads (either by toggling to a new folder or by restarting vscode), I can see the settings, but if the settings pane is not already open in a workspace and I try to open it, I get a blank page. I also noticed that the settings pane that appears when you load a fresh workspace is stuck on one tab (ie the settings don't change if you toggle between User and Workspace), but if I close and reopen the tab (not the whole workspace), it works as expected. Here's a gif to prove I'm not crazy:
This is me just clicking around to show the behavior I'm describing
I can't embed the picture because of my reputation, but hopefully that shows the behavior I am seeing. I wouldn't be surprised if at the end of the day this is still somehow my fault because of my settings or something, but hopefully this helps someone else.
Small Edit
Just wanted to point out that I acknowledge that this is not an actual solution to the underlying problem, but it's certainly worked well enough for me for now, maybe some one else can chime in with the true solution.

Closing VS Code welcome screen after opening a folder/workspace

My VS Code used to automatically close the welcome screen after opening a folder or workspace. After upgrading to the latest version, it no longer closes it and the welcome screen stays open.
I'm not sure what version I was using before upgrade but I think there's a setting somewhere to control this behavior.
Does anyone know where I can change this setting so that welcome screen automatically opens when I start VS Code but auto-closes after opening a folder or workspace.
Yes. There s a way.
Open VS Code and move to the settings page.
File Menu/Preferences/Settings
And then type welcome to search option key. After that you could see select option for welcome page when IDE loads.
Now choose your favorite one.
Your choice)

Visual Studio Code window is not appearing

I've encountered a very strange bug with Microsoft Visual Studio Code. I've been using VSCode for a few months now and never had this issue. When I open VSCode, the window just doesn't appear. The app is definitely open, because when I hover over the icon on my taskbar I can see what is being displayed in the app:
Unfortunately, when I click on it, the window does not appear.... I've uninstalled and reinstalled, deleted cache, tried older versions and nothing has worked. Has anyone else encountered this and fixed it? Any advice?
hover over VSCode icon in taskbar
right click on it
click on "New Window"
That should do it.
I had something similar. It appears that the window is just off-screen. I've used my DisplayFusion display manager - to move windows to center/top where I could handle it myself. I expect it'll also work using <Win> + <←> (maximize window to left side of screen).
In my case, the issue went away when uninstalling the GlassIt-VSC extension. I tried modifying the opacity of the window and then it disappeared. I highly suggest you try uninstalling this extension.
In my case I had connected HDMI cable but due to power off my monitor was off, but when I disconnected hdmi cable; VS code visible on my screen.
Got the answer since no one was helping.
Go to view.
Click solution explorer.
It should show the name of your project.
Click the small arrow at the beginning of the heading of your project.
Click source files.
Click yourproject.cpp.
Thank you.
I encountered a similar issue with a plugin called GlassIt while I was playing with a property called "glassit.alpha" somehow it went to 1 (possibly I changed it accidentally) and nothing showed up. (here's an image where you can slightly see that I set alpha to 20)
what i did was to just edit the %appdata%\..\Roaming\Code\User\Settings.json and set "glassit.alpha": 1, to 255
UPDATE I just realised there was already an answer I didn't see while I was writing this post
I had this issue during a remote desktop session and could bring the VSC window back via hitting F11 (via the onscreen keyboard in my case, since the F11 key on my keyboard was being captured by the host system).
In my case, I have a dual monitor setup, and the laptop was in clamshell mode. However, the laptop's built-in monitor was recognized as a third monitor, and VsCode was going there.

debugging plunker in chrome developer tools

I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging

How to clear error list of chrome app?

First introduction to chrome apps. I'm trying to get some sort of workflow down. I've enabled the checkbox to collect errors, but can not seem to clear them between executions of the app. I assumed closing the app them re launching it would do the trick. The only thing that works right now is deleting the app then reloading the package.
To clear the list of errors at "Collect errors":
Toggle the "Developer mode" checkbox (disable, then re-enable).
Click on the Reload link (reload extension/app).
Refreshing the page instead of reloading the app/extension also works.
Using the 39.0.2171.95 64-bit Chromium all I need to do is toggle the Developer mode
I think the solution suggested by Rob does not work anymore for recent versions of Chrome.
You clear the errors by following the steps below.
Go to chrome://extensions
If it's not enabled, enable the Developer mode, see below.
Click on the Errors button (in red in the picture below) on the extension.
Now you can either delete each single error by clicking on the trashbin icon next to it, or you can just clear all errors by clicking on the Clear all button depicted below.