Is there any way to view an HTML file in IntelliJ fully rendered? I have a simple HTML file with a listing of links in a project. When I view the file I see this:
link 1
link 2
link 3
I would like to open the file in IntelliJ and have it show the rendered HTML instead:
link 1
link 2
link 3
This way I can avoid launching it in an external browser.
Short answer: No.
But, honestly, because one of the issues we all know about all-so-well is the (now) minor differences in browsers - it's best to test in all of the real browsers anyways.
This is why they give you this convenient little menu in the upper right of the document:
For HTML view in IDEA
move your mouse cursor to the upper right corner of the page, or type ALT+F2, you will see a small pop-up menu with the icons for various browsers. Click one to launch it in that browser. Configure the locations of the browser executables in File > Settings > IDE Settings > Web Browsers
Related
We have a place where there are multiple href links that take you to different page numbers in the same PDF document, like so:
href="https://url.website.fake/files/2021-01/documents/a_pdf_file.pdf#page=39"
The tester reports that sometimes if they click on link A and then link B, where both links are like the one above but going to different page numbers, the second click will take you to the page number from the previous link.
I've been trying to reproduce but can never do it. The tester is able to reproduce fairly easily. Does this sound like anything anyone here has experienced? Tester has only been able to reproduce this in Edge. Thanks.
All browser users are different, so too may be their PDF extension, thus in this case seems they may not have adjusted their Edge viewer use to same as yours. Other browsers have different methods but effect can be the same. You need to educate users to change their browser security.
Check the second setting.
Most likely theirs is On and yours is Off
its included in how to handle site response such as the download to view.
Using a simple two page file attempting to swap href Sometimes (but not always) throws me a warning
so asking for page 1, I see page 2
if I switch it off and refresh I will see Page 1
For web secure use it is best set On, however for local personal use I tend to switch it Off. Most other users would possibly prefer it On to continue at the page where they last read up to.
My MWE which shows above behavior is
<html><head></head>
<body>
link A (page 2)<p>
link B (Page 1)
</body></html>
link A (page 2)
link B (Page 1)
I made a small "project" using AngularJS. I created a directive to transform some string patterns in links. I use the javascript file in some html files. One of the patterns I want to "linkify" is "//www.google.com". I open the html files with Firefox or Edge. The indicated link looks different in each situation. When I inspect the element, I see in each situation:
//www.google.com
But when I hoover the mouse in browser over the link, I see in the lower left corner of the browser:
in case of one html page in Firefox: www.google.com
in case of another html page in Firefox: file:///
in Edge, both pages: file://www.google.com/
Of course, when I try to open the link by clicking on it in browser, I am taken to the same "address" which I see when I hoover the mouse over the link. What I need is the variant:
www.google.com
I don't actually care in this stage of the project whether is a correct or valid web address.
Why this different behavior?
I am trying to create a scraper using vb6, my technique is to search the html page with get between 2 text function.
the function is tested and working correctly for all the sites, except a new site that I tried to use the same technique with it and failed.
The problem is the html is not showing the data, piece of the html as below:
<tr>
<td valign="top" nowrap="nowrap" class="label">Company Name:</td>
<td><span class="search-custom" id="synopsisDetailsOppNum"></span></td>
</tr>
the value should appear between the span tag above, but it's not appeared inside the HTML as above code.
The website is using javascript to manage the data.
I have tried also to use wait function, may the data appear with the HTML, but failed too.
Is there any solution to get the value, even with vb.net as I can update my code
that website is using JavaScript to add data to the webpage and such manipulation will not show up on the page source
The follwoing is quoted from JavaScript & jQuery: The Missing Manual by David Sawyer McFarland
One problem with using JavaScript to manipulate the DOM by adding,
changing, deleting, and rearranging HTML code is that it’s hard to
figure out what the HTML of a page looks like when JavaScript is
finished. For example, the View Source command available in every
browser only shows the web page file as it was downloaded from the web
server. In other words, you see the HTML before it was changed by
JavaScript, which can make it very hard to figure out if the
JavaScript you’re writing is really producing the HTML you’re after.
For example, if you could see what the HTML of your page looks like
after your JavaScript adds 10 error messages to a form page, or after
your JavaScript program creates an elaborate pop-up dialog box
complete with text and form fields, it would be a lot easier to see if
you’re ending up with the HTML you want. Fortunately, most major
browsers offer a set of developer tools that let you view the rendered
HTML—the HTML that the browser displays after JavaScript has done its
magic. Usually the tools appear as a pane at the bottom of the browser
window, below the web page. Different tabs let you access JavaScript
code, HTML, CSS, and other useful resources. The exact name of the tab
and method for turning on the tools panel varies from browser to
browser: • In Firefox, install the Firebug plug-in (discussed on page
477). Open a page with the JavaScript code you wish to see and open
Firebug (Tools→Firebug→Open Firebug). Click the HTML tab in the
Firebug panel, and you’ll see the complete DOM (including any HTML
generated by JavaScript). Alternatively, you can use the Web Developer
toolbar in Firefox to view
both the regular HTML source, and the generated HTML. • In IE 9, press
the F12 key to open the Developer Tools panel, then click the HTML tab
to see the page’s HTML. In the case of IE9, the HTML tab starts by
showing the downloaded HTML (the same as the View Source command). But
if you click the refresh icon (or press F5), the HTML tab shows the
rendered HTML complete with any JavaScript-created changes. • In
Chrome, select View→Developer→Developer Tools and click the Elements
tab in the panel at the bottom of the browser window. • In Safari,
make sure the Developer menu is on (choose Safari→Preferences, click
the Advanced button, and make sure the “Show Develop menu in menu bar”
is checked. Then open the page you’re interested in looking at, and
choose Develop→Show Web Inspector. Click the Elements tab in the panel
that appears at the bottom of the browser window. • In Opera, choose
Tools→Advanced→Opera Dragonfly. (Dragonfly is the name of Opera’s
built-in set of developer tools.) In the panel that appears at the
bottom of the browser window, click the Documents tab.
so the scraper won't download the page after the JavaScript finished it will get what it looks before any the JavaScript manipulation
you can watch Michael Schrenk talking about Screen Scraper Tricks: Extracting Data from Difficult Websites
http://www.youtube.com/watch?v=NtffxCi8aq4
Hi im demonstrating the html tags that are new in CSS3 and I'm making a documentation for the easy viewing and interpretation on comparing both the source code and the output.And its its really hard for me going to the source code and then selecting the file and browsing it on the browser
It would be great if I could view both the source code and the output
on the same html page.
For example(I m talking from the page I ve attached below) if I select Source code the source code must be displayed on the screen or from any of the text editors.
I don't know whether it is possible to do so,If possible it would be great
if anyone of you could guide me.
To get the source of just one element, do this:
HTML: <div id="one"><span id="two"></span></div>
JS:
document.getElementById('one').innerHTML // returns <span id="two"></span>
document.getElementById('one').outerHTML // returns <div id="one"><span id="two"></span></div>
To get the source of the entire page, do this:
document.doctype + document.documentElement.outerHTML
document.doctype returns the doctype, and document.documentElement.outerHTML returns the code for the <html> tag and everything inside it.
Use the developer tools you have in all modern browsers (the most advanced ones being Chrome and Firefox).
You typically open such a toolset using the Ctrl-Uppercase-i shortcut.
Then you have a lot of useful tools, as described here for Chrome or here for Firefox.
One of them seems to be exactly what you need. For example in Chrome, the first tab, called "Elements", shows you the source code with a lot of goodies (interpreted css with reasons, element displayed when you hover the mouse, search, etc.).
I'd suggest you take the time to read the linked documentation, as this is an essential tool of any web developer. And you won't be able to stop using those tools as soon as you go deeper in javascript or css.
This question already has answers here:
How to identify unused CSS definitions from multiple CSS files in a project
(3 answers)
Closed 1 year ago.
I have a lot of CSS files on the page. But a lot of these files are not used by styles. Is it possible to determine which files are used by page and which not.
Use http://getfirebug.com/ to debug the page.
When looking at the css it will reference which stylesheet is used.
For example:
You can see from the screenshot that when using Firebug it shows in the blue text that the page is using the style.css stylesheet.
Work down the tree in Firebug and simply hover over your elements and see which stylesheets are used.
You can debug with firebug ( http://getfirebug.com/ ). It will show what is used for what and allows you to find out.
You can do one thing :
open the website in Firefox
Use firebug to point some control on which you want to see the applied classes.
In the html source code in firebug , you can find the applied css classes on a particular control.
Find those classes in your CSS files.
Repeat this process for all the controls of the webpage.
Now you can remove those CSS files that are not used on that web page.
Thanks.
New in Chrome 59 is the coverage tool that shows you CSS and JS code coverage. It'll show you what percentage of CSS files are used on a page. When you click on that file, it'll show you which styles are used and which ones aren't. More info here: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Use Web Developer Addon with firefox.
http://chrispederick.com/work/web-developer/
After installing this addon goto firefox tool->web developer -> css-> view css.
There are many ways to find which CSS are being used by page.
here are some of them:
1) if you are using firefox then firebug is useful to use. http://getfirebug.com/
just right click on page and use Inspect Element option
2) if you use IE,then Developer tools is available in IE
3) If you use google chrome,then u can directly use Inspect Element option by right clicking on page.
The way to find or access to CSS files are used for current page, could vary base on the Browser and/or Operating system you are using.
Here I am going to share with you Opening the “Console” panel (Developer Tool) of Chrome, Firefox, Internet Explorer, Safari, Opera in both Windows and Mac OS.
When you open the Console of the current browser, click on the element you want to inspect and on the right hand side you will have a tab name Styles as shows below:
As you can see the image has the name of the CSS file (in this example named "desktop_ltr.css")