On trying to debug an issue via FireBug in FF I landed up to a JS that runs hundred lines with no new lines, space and indentation. Though I know JS a little bit but reading this JS code was piratically impossible.
Math.random().toString().replace(/90\./,"");this.res=[];this.req=[];this.ret=null;this.retry=true;this.timeout=null;this.getDuration=function(precision){precision=!isNaN(precision)?(3-precision):0;};..........................and so on non-stop....
Is there a way in FireBug or via an online tool to make this JS code format into proper human readable format?
Try jsBeautifier. It's a pretty cool tool and is web based, so no download required.
You can also find a list of browser extension downloads if you wish.
What you're seeing is obfuscated/minified JavaScript code.
This is done as a pre-production step to reduce download size of the script for web site visitors.
Your options to work with something more readable are (in order of ease of use):
if you have access to the original JavaScript files and can modify the web site, that is you best bet
if you have access to the source maps ( http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ ), you can tell the browser to use those
run an offline beautifier as #AlexMihai suggests
Related
I am trying to find the way to debug javascript code inside the php file. I have a lot of javascript code embedded inside the php file.
I can debug php code using netbeans with the help of XDebug. I can also debug javascript separately inside html or js file with browser like chrome or firefox.
What I want is to debug javascript code inside the php file if it is possible. I am sure a lot of people will be using javascript embedded with php file. I don't like it personally, but I have to work it on. I know I can write the code separately in js file and then can debug with browsers, but it's lot of code, take time for the separation.
Can anybody here suggest me a way if it's possible what I am asking.
Debug Javascript in netbeans 7.4 inside PHP project
https://netbeans.org/kb/docs/php/debugging.html
https://confluence.jetbrains.com/display/PhpStorm/Debugging+PHP+and+JavaScript+code+at+the+same+time+in+PhpStorm
https://blog.jetbrains.com/phpstorm/2014/06/debugging-php-and-javascript-code-at-the-same-time/
IMHO, without even looking it up, i don't think that it is (nor should) be feasible.
Here's why:
Your PHP gets processed on the server side, that's when XDebug kicks in and enables you to breakpoint all your PHP code. Then the server output gets to the client, that's when the actual JS is processed inline in the parsed HTML. Which means you would have to intercept the HTML in some way, parse it, detect eventual inlined JS scripts... and set your breakpoint(s) at that time (yes on each run), then output to client, which parses the HTML yet again to render it and process eventual breakpoints. It would be a tedious process and even more tedious to get to work i guess and that is why nobody even tried making an extension for that.
To my knowledge, inlined JS is also a lot harder to debug and i never saw an actual setup that would allow breakpointing embedded tags in a static HTML document directly from the IDE, which would've been somewhat a little easier to achieve than breakpointing JS in PHP...
Your best shot i guess would be to externalise your JS in separate files and only hard code <script src="path/to/your/app.js"></script> in your PHP templates, which indeed would be much more comfortable to work with on the long run anyways.
Then you would be able to breakpoint all the stuff in app.js, plus have an actual front-end architecture, syntax-highlighting, impress your boss, make your life a lot easier, the world a better place, etc.
Also, for reference: How to debug JavaScript code with Netbeans? (answer #45515159)
And read on: https://netbeans.org/kb/docs/webclient/html5-js-support.html
Edit: seems like setting JS breakpoints in static HTML tags is feasible in Visual Code for example -> https://github.com/Microsoft/vscode-chrome-debug/issues/122
I don't know if I am late, but, I came across the following website and was able to setup the debugger for Javascript and PHP which supports to debug embedded JavaScript in PHP scripts.
source: https://abcmemo.com/2017/04/20/debug-php-and-javascript-in-visual-studio-code/
The website uses PHP.exe as a web service.
It is also possible to use IIS, Apache or others.
Requirements:
IDE: Visual studio code
Extension: PHP debug
Extension: Debugger for (Chrome, Firefox or Edge)
Xdebug set in php.ini
Extension in browser (optional): PHP xdebug if you want to debug on trigger.
You need to have two debuggers running at the same time one for PHP and one for JavaScrpit.
PHP sample
JavaScript sample
I worked with a lot of wordpress templates where I had to deal with some js inside my php files. Assuming that you can run your code on a server, you can easily debug your output in dev tools in chrome (if using chrome). Chrome also allows for setting of breakpoints so you can go line by line, and since your browser ultimately runs the js, you can monitor your code behavior without dealing with the php. That was my main way of dealing with this issue.
I also recommend separating as much js as possible into separate files in your assets folder. Depending on your project, you rarely have to inline your code, In my opinion it's messy to include a lot of JS right in your php, unless you use onclick="" or onchange="" attributes (which can also be handled with event listeners.
Aside from that, console.log() the crap out of everything.
I helped my self with the following steps if it could help any body else
Note:- If your rendered code is inline specific to java-script then it would hard to debug like this.
Run the required page of your application using browser like chrome, edge etc
Open the inspection page by pressing f12 or (Ctrl+Shift+I), Or you can right click on the page see the option for the inspection and click on it.
Goto sources and double click on the source file(this will be probably your php file).
If code not loaded then reload the page by pressing f5 or Ctrl+R, you will see your java-script code there embedded with the html after rendering, then you can put the break point wherever you want and debug through the browser tools(you can see some buttons there to guide you about debugging like step-over,step-into etc).
You will also see errors there regarding java-script,
I have been trying to find an explanation for this, but everywhere I looked doesn't seem to answer my question. Essentially, whenever I look at the "view page source" option on a webpage like Facebook or my school's home page (gvsu.edu), the source code is just a huge wall of text. As a result, I have a few questions:
Is this how it looks in the editor? If not, why is it formatted this way when I look at the source code?
Is there any way to decipher this code so I can see how it works?
Are there any advantages to formatting the code this way?
Thanks.
Is this how it looks in the editor? If not, why is it formatted this way when I look at the source code?
no, usually programmers try to make code as readable as they can, this is a "minified" version of the code, it's done to make files smaller so people can receive it faster in their browsers.
Is there any way to decipher this code so I can see how it works?
you can use some online tool to like this, you will have to format html, css and javascript individually.
Are there any advantages to formatting the code this way?
already answered, but here I can add that usually you don't format the html/css/js that way, you have a tool that does that job for you like gulp-htmlmin, gulp uglify, cssmin or many others, and you work with a "development" version of the files, when you are done editing you run some scripts and they spit that minified version to you, so you can upload it to your server.
I checked some websites source code and JavaScript games. The problem is that everything is readable and understandable except for JavaScript code that is isolated on a file with the extension .js. It looks like this:
{Vargas=void0,h=!0,Ge=null,l=!1,AA=component,BA=Infinity,ca=set Timeout,DA=is Nan,m=Math,ea=deconstructionism;function He(a,b){return a.on-load=b}function IE(a,b){return a.on error=b}function ha(a,b) {return a.name=b}
As you can see, it's hard to read this code because of the stupid indentation. I tried to use Microsoft visual web developer and free JavaScript editors to organize the code, but it was all useless!
How can I make it more readable?
The best place to start is to look at other open source java script libraries/modules/plugins. You must have the original code though, because what you see in the browser is already "compiled" for the web to be small and fast.
For the client you have plenty frameworks. Look for example at the list jsfiddle uses (top-left). You can also use this tool to play with javascript without having to install anything. Search on the web for those projects (that jsfiddle uses as libraries) and look into the code.
There is also a server-side javascript library that allows you to write javascript code also for the server (also web apps, the server side of them). This is called Node.js Ceck this page to find out more. In Node.js you have almost an infinite number of open source and small modules: see the node module registry wehre you find the links also to the individual project.
In any case, you certainly need a Github account to play with other's code because most of these projects are stored on Github.
I'm looking for an engine/solution/framework/gem/egg/lib/whatever for either Ruby or Python to log into a website, crawl HTML5 content (mainly charts on a canvas), and be able to convert it into a PDF file (or image).
I'm able to write crawling scripts in mechanize so I can log onto the website and crawl the data, but mechanize does not understand complex JavaScript + HTML5.
So basically I'm looking for an HTML5/JavaScript interpreter.
This question is a bit confusing... sorry re-read my answer after reading the question again.
Your question has two parts:
1. How can I crawl a website
Crawling can be done using Mechinize, but as you said, it doesn't do Javascript very well. So one alternative is to use Capybara-webkit or Selenium (firefox / chrome).
Usually this is used for testing, but you may be able to drive it using Ruby code to navigate the various pages.
2. How can I convert the output to PDF
If you need to convert the crawled content to PDF, I don't think there is a way to do that. You may be able to take a screenshot (useful for testing) using Capybara-webkit or Selenium, but converting that to PDF may be just a matter of pumping it through some command line utility.
If you're looking for a true HTML to PDF converter (usually used to generate reports from views in a rails app), then use PDFKit
Basically it's a WebKit browser that can output to PDF. Really simple to run with.
I am trying to save a couple of web pages by using a web crawler. Usually I prefer doing it with perl's WWW::Mechanize modul. However, as far as I can tell, the site I am trying to crawl has many javascripts on it which seem to be hard to avoid. Therefore I looked into the following perl modules
WWW::Mechanize::Firefox
MozRepl
MozRepl::RemoteObject
The Firefox MozRepl extension itself works perfectly. I can use the terminal for navigating the web site just the way it is shown in the developer's tutorial - in theory. However, I have no idea about javascript and therefore am having a hard time using the moduls properly.
So here is the source i like to start from: Morgan Stanley
For a couple of listed firms beneath 'Companies - as of 10/14/2011' I like to save their respective pages. E.g. clicking on the first listed company (i.e. '1-800-Flowers.com, Inc') a javascript function gets called with two arguments -> dtxt('FLWS.O','2011-10-14'), which produces the desired new page. The page I now like to save locally.
With perl's MozRepl module I thought about something like this:
use strict;
use warnings;
use MozRepl;
my $repl = MozRepl->new;
$repl->setup;
$repl->execute('window.open("http://www.morganstanley.com/eqr/disclosures/webapp/coverage")');
$repl->repl_enter({ source => "content" });
$repl->execute('dtxt("FLWS.O", "2011-10-14")');
Now I like to save the produced HTML page.
So again, the desired code I like to produce should visit for a couple of firms their HTML site and simply save the web page. (Here are e.g. three firms: MMM.N, FLWS.O, SSRX.O)
Is it correct, that I cannot go around the page's javascript functions and therefore cannot use WWW::Mechanize?
Following question 1, are the mentioned perl modules a plausible approach to take?
And finally, if you say the first two questions can be anwsered with yes, it would be really nice if you can help me out with the actual coding. E.g. in the above code, the essential part which is missing is a 'save'-command. (Maybe using Firefox's saveDocument function?)
The web works via HTTP requests and responses.
If you can discover the proper request to send, then you will get the proper response.
If the target site uses JS to form the request, then you can either execute the JS,
or analyse what it does so that you can do the same in the language that you are using.
An even easier approach is to use a tool that will capture the resulting request for you, whether the request is created by JS or not, then you can craft your scraping code
to create the request that you want.
The "Web Scraping Proxy" from AT&T is such a tool.
You set it up, then navigate the website as normal to get to the page you want to scrape,
and the WSP will log all requests and responses for you.
It logs them in the form of Perl code, which you can then modify to suit your needs.