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.
Related
I'm using Doxyfile 1.8.17, and decompiling an Android app, with apktool, and also unzipping the APK to view some files in there too with Doxygen. I've managed to pull only what I need using EXCLUDE_PATHS. SOURCE_BROWSER is set to YES. My problem is whenever I go to click on the file in File List, I just get a link to go to the source code of the file. When I click it, it opens the source code in the right plane. I would like to just click the left plane and view the source code instantly in the right plane, however, there doesn't seem to be an option to change the behaviour. In the html output folder there is two types of files. foo.html and foo_source.html. This is the same for every file that you pull from INPUT sources. I just want it to show me foo_source.html and nothing else. Is this possible?
I'm trying to track down the source of some bad styling in the browser, but when I click through to the source of it from the Styles pane, I'm taken to one of many inline <style> blocks that are automatically generated on the page, which after a certain point, is truncated with …, as seen below. If I try to "Edit as HTML" or other methods to copy the block's contents, it doesn't expand this. Is there any way to see the full source of it?
Firefox can get the full style text.
Is there a way to attach images to github issues without drag'n'drop, copy-pasting images or jumping through various hoops - just by using a file picker?
I find drag'n'drop very inconvenient, and copy-paste does not work in Firefox (on top of being rather inconvenient as well).
Github help page only mentions drag'n'drop, or copy-paste for Chrome.
The question here on adding images lists additional methods like creating a custom repository or wiki.
All of that is enough of a pain in the ass for me to ask a question here, hoping for a hidden way to use normal file picker.
There is a file picker. Simply click on the Attach files by dragging & dropping, selecting them, or pasting from the clipboard field.
Yes there is, its very simple, but not intuitive.
Consider this example where you want to comment:
Just click the highligted section with the text "Attach files by dragging and dropping, selecting them, ...".
Then a file dialog will open up:
If I view the source of a certain webpage, there is a script tag that seems to be cut off at the end, ending with an ellipsis (...). Is there a way to tell if the script is actually being cut off or if the ellipsis is actually part of the content? If it is cut off, is there a way to view the whole thing?
Yes, it appears that Chrome Developer tool truncates the display of the content and shows an ellipses instead. The content is still there and parsed by the browser.
You can view the full content by going to the Sources tab, clicking on the Show Navigator icon, and selecting your file.
The previous answers do not work if js code added dynamically. For me works when I do right click on script element and choose Copy -> Copy element
For those looking just to view or copy a cut off script tag, the solution I found to work for me is saving the web page to disk and then opening using a code editor. Obviously this won't allow you to edit in place or debug, but for copying it works great!
If your truncated script is being generated dynamically, you will note that the truncated code is automatically highlighted/selected. If you copy this and paste it into a text editor, you will find that the complete/un-truncated section of script will be pasted. Not ideal, but not too much hassle either.
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