I am creating NODE.js app that use Nunjucks as view engine. I added tests to verify if the html created is valid (for now I just wanted to check if all tags are properly closed). In order to do this i spin up application, go to the site using headless chrome, making a snapshot and running validation code on output files.
The problem is that browsers try to fix HTML code automatically. They close tags by themself in order to create more or less valid HTML. Is there a way to disable this feature?
I would like to be sure that i created valid HTML document using nunjucks rather then counting that browser will fix it itself.
If you validate the source directly, Chrome will not change the HTML. Try this in your browser: view-source:https://stackoverflow.com/questions/65091531/disable-html-autofix-in-chrome
If you use the developer panel to inspect the DOM, Chrome tries to correct poor html. 😊
You could maybe just do a GET request to the application, and validate the result, instead of using Chrome.
Related
I am trying to find a way to replace certain text on the webpage without the use of chrome extensions.
For example, I want the text 'dogs' to replace with 'doggos' each time the web page detects the word dogs. Is it possible to do this without the use of Chrome Extensions? How can I write such a script and can this run in the backgroun?
Thanks all!
Use Chrome Dev Tools
If you want to use chrome, but not a chrome extension, you want to use the console in the Chrome Dev Tools. Running a script for a website on the Chrome Console is a solution to your question, and is shown below, but it will disappear when you refresh the page.
Replacing String Literals in the Body
To replace all instances of dogs with doggos in the HTML body, you would walk the document tree as documented by this SO question.
Applied to your question, the result is below:
Further Reading
You may also want to check out javascript with Regular Expressions, which are more powerful than a simple string replace. If you want this running in the background, you should look at Mutation Observers to check whether the DOM has changed.
I've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');
In my Google Chrome extension, I need to be able to get the current page HTML, including any updated Ajax HTML (unlike the browser's View Source command, which doesn't update it).
Is there a way to get it as a string in my Extension?
Suppose my extension is a right-click context menu called "View Actual HTML Source" which should print the current HTML to the console, or maybe count the number of certain tags there. I wasn't able to find an easy answer to this.
You can get the current state of the DOM as HTML programmatically using document.documentElement.innerHTML
Or just use Developer Tools
I followed the exact solution here, and this gave me the Page Source HTML:
Getting the source HTML of the current page from chrome extension
The solution is to inject the HTML into the Popup.
Does greasemonkey or tampermonkey have functionality that lets me edit the raw HTML response before it gets passed to the browser?
I'm trying to do this in an attempt to modify an inline script before it executes. This solution must work on both Firefox and Chrome so something like beforescriptexecute won't work because chrome doesn't support it yet.
If not, is there an extension that does provide this functionality that is available to both browsers?
Quick answer: No.
Longer answer: Tampermonkey and Greasemonkey operate on editing the page has loaded, not at any time prior to that. So, preventing a script from executing isn't going to happen. Neither of these tools can change the code before it's run, it only alters once it has run and can inject certain scripts into the page after it's loaded that affect the data displayed or the appearance. The best you could do is update or replace what's displayed based on the inline script, but it's still going to get sent initially.
I am the developer of a webapplication.
Chrome displays my Javascript-and-AJAX-generated webpages correctly, but when I try and print them (via its native function) I get a blank page.
Printing works just fine on other browsers.
I have tried and print server-side-generated pages with Chrome and they get printed fine.
What can be wrong on the webpages of my web application? I think the issue is that those pages are dynamically generated by Javascript and AJAX.
I am saying that because I have just found out that I can't even save those pages correctly with Chrome (all the dynamic HTML is not shown).
I am on Google Chrome 13.0.782.112.
How can I debug and fix this issue?
Is there any workaround?
Is anybody managing to get dynamic-generated content printed with Google Chrome?
This problem is driving me crazy!
P.S.: some of my users are reporting the same problem on Safari :-(
UPDATE: upgraded to Chrome 14.0.835.202 but the issue is still there...
I've had exactly the same problem, though not in Chrome (although I didn't actually test with Chrome). On certain browsers (and I cannot remember which ones offhand - but it was either in IE or FF), any content that is added into the DOM by JavaScript is not printed. What is actually printed is the original document that was served to the browser.
I successfully solved this using the following JavaScript function:
function docw()
{
var doct = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
document.write(doct + document.getElementsByTagName('html')[0].innerHTML);
}
This is called when JavaScript page manipulation has finished. It actually reads the entire DOM and then re-writes the whole document back into itself using document.write. This is now enabling printing for my particular project on both IE and FireFox, although I'm pretty sure one of those did already work in the first place, and the other one didn't (can't remember which from memory, and it's not a project I can pull out to test at the moment). Whether this will solve the problem in Chrome I don't know, but it's worth a try.
Edit Terribly sorry, but I'm a complete pleb. I just re-read my old comments and this solution had nothing to do with printing; it was actually to fix a problem where only the original served document would be saved when saving to file. However, that said, I still wonder if it's worth a shot.
This helped me with a related problem - how to view/save dynamically generated HTML itself. I came up with the following bookmarklet.
javascript:(function(){document.write('<pre>'+(document.getElementsByTagName('html')[0].innerHTML.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'))+'</pre>')})()
I run this and 'select all' / copy, and then (in Linux) do 'xclip -out' to direct the large amount of clipboard data to a file.
Trevor's answer totally worked for me- with jquery I simply did something like
$("html").html $("html").html()
worked perfectly