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
Related
RStudio uses Chrome Devtools for debugging support in its Viewer pane. (It is labelled as "RStudio Devtools", but I'm not sure to what extent it is customized besides that). You can open its window using Right-click "Inspect Element".
When developing a display that uses Javascript, the source pane in Devtools is very useful for setting breakpoints, single stepping, etc.
One thing that is fairly inconvenient is finding the line where I want to set a breakpoint. Once I have the source file open searching it is easy, but getting to the right source file is hard. Typically after I go to the source pane, I see something like this:
I know the name of the file I want to debug, but it's buried several levels below index.html in the list of files on the left. Is there a way to quickly search this hierarchy of files for a filename, so that I don't need to open all the levels down to the file I want? For example, I might want to debug htmlwidgets.js:
You'll note in the "sources" pane that, if you have no open files, you'll see a message in the middle that indicates you can type Command + P (or Ctrl + P on Windows/Linux) to open a file. When clicked, this will open a text box that will fuzzy search across the names of all source files. Type the filename there and it should be in the first results. You can navigate to it with the keyboard and select it with <Enter>/<return>, or simply clicked with the mouse.
I want to understand what changes are made to the html of a webpage when I use an image carousel. When I go to the next image in the carousel the html of the page updates. I would like to get a copy of the updated html so I can run diff and compare the changes to the original html.
I am interacting with the webpage through Chrome but only have access to the publicly-available source code at the moment.
I have been using Chrome's Inspect Element panel. In the 'Elements' tab I can see the html changing when I move the carousel to the next image. Despite watching the html update in the 'Elements' tab, each time I try to save the html I can only save the original html at best. Here is what I've tried:
Open 'View Source' and save the source. In hindsight, I realised this fetches the source code fresh instead of loading the source code of the current view I'm looking at.
Save the page directly from the page I'm on.
Go to the 'Sources' tab in 'Inspect Elements' and save from there.
Try to save from the 'Elements' tab directly, but I cannot figure out a way to do this. There is no save option and I cannot select the text to copy and paste.
I've tried Googling and found related-sounding headings but these contained unrelated content.
Tried Firefox's Inspect Element, which at appears to be built on the same functionality. I wonder if it's built on the same engine?
I am using Chrome 84 on Linux Mint 19 but I would be willing to use a different browser or other application that would work on my system.
I hope this is the correct Stack Exchange for this question. I initially looked at webapps.stackexchange but that didn't seem as good a match once I scanned through other questions.
In the 'Elements' tab of Inspect Elements right click on an html tag, for example <html>, and select 'Copy OuterHTML'. Paste the selection into a text editor.
This works with both Chrome and Firefox. Firefox also gives the option to 'Copy InnerHTML'. The difference between the two is that 'OuterHTML' copies the opening and closing tags while 'InnerHTML' only copies the contents within the tags.
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)
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.
How do I tell the Chrome developer tools that I'm done live-editing a section of javascript, and want the result to be "evaluated"?
Editing the javascript on the fly is simple, I simply put the cursor somewhere in a script in the Scripts tab and start typing, but how do I finish the editing process?
I read here that "changes you apply to the code are expressed only at the time when execution passes through them", but even if I try editing a function when it's being called (i.e., when having a hit breakpoint inside it), I can't get my changes to be acknowledged. Edit: this whole, "execution passes through it" stuff seems false or out of date at best.
Editing javascript on the fly in the developer tools is demoed by Paul Irish in this video around 3:30, but I can't figure out how he goes from editing code, to having it actually be used by the browser.
Ctrl+S or "right-click > Save".
Make sure you haven't enabled pretty-print, as you can't live-edit code, then.
This is what you are looking for:
1.- Navigate to the Source tab and open the javascript file
2.- Edit the file, right-click it and a menu will appear: click Save and save it locally.
In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.
More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/
Go to sources, choose the file you want.
Click the pause button to pause debugging .
Modify the script adding a console.log or whatever you want, wherever you want
Save the file (cmd-s or ctrl-2)
Click the pause/resume button to resume execution
the modified code will be executed