We help IT Professionals succeed at work.

Test a HTML Page with CSS references

compdigit44
compdigit44 asked
on
I am not a Web Developer so please bare with me. Once of our appliance uses web interface that can be customize by updating the correct html, image and CSS files.

How can I test the updated files and how they look without upload them to the appliance?
Comment
Watch Question

Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
Just view them in your browser.  If it's HTML, that's where you going to be viewing it anyway.
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
You can use the dev tools of the browser to make minor tweaks but I've recently used an extension for chrome that allows you to apply persistent styles to the page you're viewing:

https://chrome.google.com/webstore/detail/my-style/ljdhjpmbnkbengahefamnhmegbdifhlb?utm_source=chrome-app-launcher-info-dialog

Once installed, just press ctrl-m and it opens up a side panel where you can insert your styles for the page.

Author

Commented:
I tried to double click the file but it comes up blanks and it not reference the CSS or image files
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
double click what file?  This only works in the Google Chrome browser.  What are you using?

Author

Commented:
I am using IE

Author

Commented:
I tried it in Chrome and had the same problem .. I believe I see the problem. The html file list the path to the image an CSS files as /site/....... This directory does reside in the folder... Maybe it needs the full path for the image and CSS locations since it is not on the appliance ???

Just a thought
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
If you are duplicating the directory structure found on the appliance, then it should work on your computer.  I do this everyday.

Author

Commented:
That is the thing I am not duplicating is exactly which i think is my problem I am going to update it and test it again.

Author

Commented:
Just update the html to include the full update past to the file for testing for example if the html file has the path for an image as /imag/pic.jpeg.... I updated it to be... c:\users\name\desk\folder\image\pic.jpeg...

Long story short when I check on the updated html file I still get a blank page... The directory I copied to have *.js script files and I am wonder if these have to run to get the page to display correctly
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
That's possible.  IE doesn't like running javascript in local files.  Try viewing the page in Firefox instead.

Author

Commented:
I do not have Firefox but Chrome... I tried to open the file with Chrome and had the same result....
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Since you haven't posted the files, it is hard to help you at this point.  If they are just HTML, CSS, and javascript, they should run in Chrome or Firefox.  I can't tell you why they are not without seeing the code.

Author

Commented:
I cannot upload the file because the have specific company reference which I cannot post since it is for internal use only.

To open the files in Chrome do i just double click the file or do i need to do something special?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
You can right click on the file name, click on "Open With" and choose Chrome.

Author

Commented:
did that ... same result..... I have to be doing something wrong unless these *.js files actually build the page
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
If those *.js files are in the right place, they should still work in Chrome.  It's just IE that blocks them in local files.

Author

Commented:
The folder sturuce is the same from the appliance... the only change is that instead of being located at /root/site..bla...

that are now at c:\users\desktop\root\site....

Author

Commented:
I cannot upload the file but I an trying to edit the login page on a Citrix Netscaler 10.1. The landing htm file ti TMINDEX.html and I copied the root /vpn folder and all subfolders to my desktop so I can edit them...

Just puzzled why I cannot view my page on my desktop?  I really think the *.js files build the page...
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
That should not stop you from viewing the files in Chrome.

Author

Commented:
I think part of my problem is that I do not know how to properly use the Chrome native dev tools
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
You don't need 'dev tools' to view a page.  Though it might help to troubleshoot the page.  If you load the page in Chrome and "View Source", what do you see.

Author

Commented:
When I double click the html file and view the source I see the correct information for the file as I see it in Notepad++
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
What program opens it when you double click?  IE or Chrome?

Author

Commented:
default is IE
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Then, right-click on the file name, click on 'Open With' and choose Chrome.

Author

Commented:
thank you for the great help everyone... but I ended up giving up on this one.....