I currently have a node.js script that automatically creates a group of files and then zips them ready for being uploaded on a site. I'm trying to add one extra piece of functionality to the script that will log into the site and upload the file itself.
I've done some reading around and found a lot about headless browsers but not sure if that's the right path to go down as they seem to rely on other applications like chromium and they're focused on testing sites.
Does anyone know where I should start looking?
In my current project I am using the following library from Google, puppeteer. I personally found it to be very easy to use, and it even provides access to the dev protocol that Google Chrome has.
I've done some reading around and found a lot about headless browsers but not sure if that's the right path to go down as they seem to rely on other applications like chromium and they're focused on testing sites.
Yes, they are often used for testing, to assure that the correct things are rendered on screen etc. However, in many scenarios, like yours, the use of a headless browser to interact with a website is totally legit in a non-testing scenario.
this is my first time asking a question through stackoverflow, while I've been a reader for years. It's the first time I really couldn't find an answer to my problem through the search function and it is probably because it's specific to my website.
I don't know when or after which modification I did, some javascript modules started behaving weird. The website would load partially the first time you visit it on chrome and then will load correctly if you refresh the browser. This won't happen on Firefox where the website will always be uncomplete. All javascript modules aren't loading correctly.
Website URL: www.levicechocolat.com
What I've tried so far:
Disabling Prestashop's Smart Caché for JavaScript features. This fixed 1 script, the navigation hover menu so I'll keep it off.
Disable CSS Smart Caché didn't fix anything, I kept it on. Same for all other prestashop optimizing features, tried one by one enabling/disabling and the only change I noticed was the above mentioned so that's the unique PS optimizing feature I kept off. I'll keep HTML compression off till I solve this issue.
Read that putting JS code at the end just before the </body> tag may fix this problem but it didn't.
I'd really appreciate if you can help me to figure this out. If you need me to post a code just let me know and I will.
Thank you very much for your help. If you live in Chile or come to Chile and you help me out I'd be glad to offer you some chocolates :).
Most probably there are some issues with the theme or some modules installed.
On Chrome it's working correctly for me and I see no Javascript errors. The wierdness is happening on Firefox, the homepage is not loading correctly and in developer console I see this javascript error: ReferenceError: writeCookie is not defined
You definetly need to debug this. What I recommend doing is moving your store on a local development machine and do the following:
Activate Prestashop's development mode: edit config/defines.inc.php at line 29 change: define('_PS_MODE_DEV_', false); to true: define('_PS_MODE_DEV_', true);
From Back Office > Advanced Parameters > Performance disable all CCC (COMBINE, COMPRESS AND CACHE) options - mainly "Move JavaScript to the end" and "Compress inline JavaScript in HTML" give errors on some themes
If it's still not working right (check for errors on Firefox and Chrome) and no other javascript errors show up try to "Disable non PrestaShop modules" from Advanced Parameters > Performance > DEBUG MODE
You can also have a look at the theme's custom javascript code maybe you can spot something there.
I hope this sheds some light on your issues.
it might be an issue with http and https.
Browsers might complain or don't load at all if resources are coming from mixed sources (secured and unsecured).
If your site is unsecured (http), try loading only resources (scripts, images) from unsecured sources.
If you cannot avoid loading resources from secured sources (https), you should consider get a SSL certificate and secure your website.
I'm refactoring the code of an existing website "home made". When I open some pages my CPU consumption jumping by 20%...
I'm used to Firefox development tools, but everything seems to be calm after the page is loaded. I guess it's a javascript running in circle but I don't know how to catch it.
Do you know a way to spot the right script? Is there something exisiting similar to resource consumption but at the website scale?
Test your website for performance test.
Some simple websites and browser plugins can show the exact javascript which is taking time (If only javascript is the real issue. If other things are also helping in cpu util then these plugins can point you to them.)
GTMetrix - website which can help you find bottlenecks in your website
pagespeed - chrome plugin which is really good plugin to find bottlenecks as well as improved javascripts. this plugin can pin point your culprit javascript and will provide you optimized/minified version of it. Of course if only java script is the actual bottleneck.
firebug - mozilla plugin in firefox which also can perform same job but wont give optimizations.
meanwhile you can monitor your system resource util. and make sure that nothing else is running on your client other than website to make sure that util is because of those 2-3 pages.
Based on suggestions provided by above tools/profilers, decide your optimization candidates.
I've created a page which utilizes dynamic page loading with JS, it works fine in Safari, FF and Chrome - But of course the infamous Internet Explorer isn't doing a good job.
(I know there are other issues on this page, under the "Cykler" section, these aren't important for this question and shouldn't be focused at)
http://soegaardcykler.dk/beta
Try clicking on one of the categories, Cykler, Info and so on.
The strange thing is that if I open developer tools in IE and set the mode to IE8 and back to IE9 there is no issue, it switches pages like any of the other browsers.
If I close and open IE again the issue is back - If I go to the console to check what's going on it asks me to refresh the page - When I do this the issue is gone again.
I have no idea what the heck is going on, two of my friends have tested as well and they both have the issue when coming to the page for the first time.
I notice you're logging to a console. That's problematic in IE. The console object only shows up if the console is actually open (I think).
There are several solutions out there to avoid console issues; I can't recommend a best practice though besides creating your own logger object (which isn't a bad idea anyway).
Just a side node: I don't know if you're using a Windows operating system, but if you're familiar with the Fiddler2 HTTP traffic analyzer, you can search through sessions really easily. That's how I found the file you missed.
One last edit: here's a good related post: What's the correct way to write to the script console (console.log) in IE?
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!