Develop Reference

Debugging Javascript inside php file possible?

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,

Why cant i see HTML source for big websites like Google and Facebook?

I have recently taken an interest in software development. I have gotten pretty good by looking at source code, and visiting stack overflow regularly. I have since taken a liking to web applications due to their scalability. Because of this, I wanted to look at the source code of Facebook and Google in a web browser by clicking "View Source".
Funnily enough, clicking "View Source" on Google and Facebook does NOT show HTML Markup, but a full page of minified Javascript (at least i think its JS) instead. I have attached a screen shot to show what I mean. How does this work? From what I have learnt along the way, a browser requires HTML to display content. My Assumption is that large companies do this to protect their source. But how does a browser know what to display? And if a browser can display these sites properly, from what source code is it reading from?
I have tried to google this, but search terms such as "cant view Facebook source" or "Cant view Google Source" show me a bunch of un related results.
Is this a framework I have not heard of? Can anyone provide explanation on this. If these large companies are using these new methods, I would like to incorporate them into my own arsenal.
Screenshot of what is visible when you click "View Source" on the Google search results page:

You appear to not understand fundamentals of HTML and JavaScript and how they work together in a browser; consider this example from Wikipedia/JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<button id="hellobutton">Hello</button>
<script>
document.getElementById('hellobutton').onclick = function() {
alert('Hello world!'); // Show a dialog
var myTextNode = document.createTextNode('Some new words.');
document.body.appendChild(myTextNode); // Append "Some new words" to the page
};
</script>
</body>
</html>
This is HTML markup with embedded JavaScript (you can embed CSS as well). What some people do, for various reasons, is minify the JavaScript to the point where almost everything that makes it human readable is removed -- of course the Javascript runtime (browser) doesn't care and will just as easily execute it regardless of whether it's minified or not.
HTML it self can be minified, but you can't really minify it anymore than removing line breaks, spaces and making it look like a single line without breaking the HTML's syntax/semantics like you can with JavaScript because HTML doesn't have variables.
Now consider the same example from Wikipedia, but minified (JavaScript and HTML)
<!DOCTYPE html><html> <head> <title>Example</title> </head> <body> <button id="hellobutton">Hello</button> <script>document.getElementById("hellobutton").onclick=function(){alert("Hello world!");var e=document.createTextNode("Some new words.");document.body.appendChild(e)};</script> </body></html>
Both are equally valid for the browser.
Additional Info
All the client side code needed to show you the website will always be visible to you. But recently, web developers have been inclined to use more and more JavaScript to add interactivity to their site or generate the HTML dynamically. The the latter case, you will often find that the 'View Source' page have nothing at all expect a script tag. You can use the Developer Tools on your browser to inspect this dynamically generated HTML, as well as inspect the various JavaScript scripts that have been loaded for that site.
Keep in mind, that developers can and will often minify their code making it difficult to view the JavaScript easily regardless of how you choose to inspect it.
Best place to see raw, unminified JavaScript if you're interested in on open source web projects on places like GitHub.

The webpage is html-rendered by using compiled source from javascript (Angular or Reactjs or Vue etc.) Using View source does not help in this case. You can right-click and choose Inspect element instead.

The mess of JavaScript that you're looking at is known as minification. Illegibility is indeed a by-product of minification, though the main purpose is to improve loading speeds. Because Facebook and Google are two of the most high-traffic websites in the world, they have to employ a umber of techniques in order to server up content faster.
Minification is performed using a Task Runner like Grunt or Gulp, and essentially does a few things:
Changes variables like useful_name into equally valid short variables like e.
Eliminates all whitespace.
Rewrites many functions into equal shorter functions.
For example:
var array = [];
for (var i = 0; i < 20; i++) {
array[i] = i;
}
Is equivalent to:
for(var a=[i=0];++i<20;a[i]=i);
Which obviously takes up much fewer bytes.
While the minification helps 'obfuscate' code, it does not improve security in the slightest, as the obfuscation can be completely decoded.
In addition to minification, it's also common practice to combine multiple different JavaScript or CSS files into one, using bundlers like Browserify, Brunch or webpack. Because of this, it can be quite difficult to work out what the code is really doing, though this can be aided by Prettyprinting the files by clicking on the {} icons in the bottom left of the relevant source.
Other common load-speed approaches include using Content Delivery Networks (CDNs), cutting down on HTTP requests, and using sprite mapping - all of which both of the above do in addition to their minification.

From what I have learnt along the way, a browser requires HTML to display content.
Check out this post about client side and server side rendering.
Google's front page actually is fully server-side rendered (all the HTML is present on "view source"), it just there's a lot of inlined Javascript before the page body and all of it is also minifed.
Facebook uses JavaScript much more heavily, most parts are written in React (their frontend framework), which is why you will barely see any plain HTML when inspecing Facebook's source. As Jun said, you are however able to inspect it with your browser's inspector after Javascript has rendered all of it.
My Assumption is that large companies do this to protect their source.
Not really, there's no "protecting" frontend code, it's just that client-side rendering has become much more popular and everybody minifies their source codes for bandwidth savings. On such a large scale (Facebook and Google), every saved byte counts. It might be harder to read, but nothing can actually be hidden or protected as, like you said, browsers need to render and execute the code client-side.

Generate PDF from web app

I need to generate a PDF from the current screen in my webapp. Some kind of screenshot, but I'm facing serious difficulties.
The main problem is that the view contains a grid made with jQuery Gridster; and some "widgets" contain complex elements like tables, highcharts, etc.
So plugins like jsPDF or html2canvas can't render my page in a prorper PDF. They always generate it blank.
This is how the page looks like. You can/move resize each element:
(Sorry for the CIA style, but there's business data in there)
Some ideas I came across but don't work are:
Using browser print-to-pdf feature programatically. (can't)
Use phantomjs. (but page state matters, so...)
I believe a solution to this poroblem may be widely adopted by anyone trying to generate a PDF of img from current screen in a web app. Quite an unresolved problem.
It's ok if only works on Google Chrome.
Many thanks.
EDIT:
One posible solution might be to find a way to represent the current layout status with an object and save it with and id.
Then retrieve that object via url param with the id and apply the stored layout to the inital page.
This way I might able to take a screenshot with phatomjs, but it seems quite complex to me. Any alternative?

Based on the fact that you're struggling with capturing dynamic content, I think at this point you need to take a step back and see that you might need to alter your approach. The reason these plugins are failing is because they will only work with the HTML before interactions right?
Why not convert the HTML to .pdf format from the server side? But the key part here is, send the current HTML back. By sending it back, you're sending updated static HTML back to the server to be rendered into a PDF? I've used HTML to PDF from server side before and it works fine, so I can't see why it wouldn't be appropriate here.
See this answer for details about HTML to PDF server side.

Converting a web app into an embeddable <script> tag

I just did a proof of concept/demo for a web app idea I had but that idea needs to be embedded on pages to work properly.
I'm now done with the development of the demo but now I have to tweak it so it works within a tag on any websites.
The question here is:
How do I achieve this without breaking up the main website's stylesheets and javascript?
It's a node.js/socket.io/angularjs/bootstrap based app for your information.
I basically have a small HTML file, a few css and js files and that's all. Any idea or suggestions?

If all you have is a script tag, and you want to inject UI/HTML/etc. into the host page, that means that an iframe approach may not be what you want (although you could possibly do a hybrid approach). So, there are a number of things that you'd need to do.
For one, I'd suggest you look into the general concept of a bookmarklet. While it's not exactly what you want, it's very similar. The problems of creating a bookmarklet will be very similar:
You'll need to isolate your JavaScript dependencies. For example, you can't load a version of a library that breaks the host page. jQuery for example, can be loaded without it taking over the $ symbol globally. But, not all libraries support that.
Any styles you use would also need to be carefully managed so as to not cause issues on the host page. You can load styles dynamically, but loading something like Bootstrap is likely going to cause problems on most pages that aren't using the exact same version you need.
You'll want your core Javascript file to load quickly and do as much async work as possible as to not affect the overall page load time (unless your functionality is necessary). You'll want to review content like this from Steve Souders.
You could load your UI via a web service or you could construct it locally.
If you don't want to use JSONP style requests, you'll need to investigate enabling CORS.
You could use an iframe and PostMessage to show some UI without needing to do complex wrapping/remapping of the various application dependencies that you have. PostMessage would allow you to send messages to tell the listening iFrame "what to do" at any given point, while the code that is running in the host page could move/manipulate the iframe into position. A number of popular embedded APIs have used this technique over the years. I think DropBox was using it for example.

hide javascript/jquery scripts from html page? [duplicate]

This question already has answers here:
How do I hide javascript code in a webpage?
(12 answers)
Closed 8 years ago.
How do I hide my javascript/jquery scripts from html page (from view source on right click)? please give suggestion to achive this .
Thanks.

You can't hide the code, JavaScript is interpreted on the browser. The browser must parse and execute the code.
You may want to obfuscate/minify your code.
Recommended resources:
CompressorRater
YUI Compressor
JSMin
Keep in mind, the goal of JavaScript minification reduce the code download size by removing comments and unnecessary whitespaces from your code, obfuscation also makes minification, but identifier names are changed, making your code much more harder to understand, but at the end obfuscation gives you only a false illusion of privacy.

Your best bet is to either immediately delete the script tags after the dom tree is loaded, or dynamically create the script tag in your javascript.
Either way, if someone wants to use the Web developer tool or Firebug they will still see the javascript. If it is in the browser it will be seen.
One advantage of dynamically creating the script tag you will not load the javascript if javascript is turned off.
If I turned off the javascript I could still see all in the html, as you won't have been able to delete the script tags.
Update: If you put in <script src='...' /> then you won't see the javascript but you do see the javascript file url, so it is just a matter of pasting that into the address bar and you d/l the javascript. If you dynamically delete the script tags it will still be in the View Source source, but not in firebug's html source, and if you dynamically create the tag then firebug can see it but not in View Source.
Unfortunately, as I mentioned Firebug can always see the javascript, so it isn't hidden from there.
The only one I haven't tried, so I don't know what would happen is if you d/l the javascript as an ajax call and then 'exec' is used on that, to run it. I don't know if that would show up anywhere.

It's virtually impossible. If someone want's your source, and you include it in a page, they will get it.
You can try trapping right click and all sorts of other hokey ways, but in the end if you are running it, anyone with Firefox and a 100k download (firebug) can look at it.

You can't, sorry. No matter what you do, even if you could keep people from being able to view source, users can alway use curl or any similar tool to access the JavaScript manually.
Try a JavaScript minifier or obfuscator if you want to make it harder for people to read your code. A minifier is a good idea anyhow, since it will make your download smaller and your page load faster. An obfuscator might provide a little bit more obfuscation, but probably isn't worth it in the end.

Firebug can show obfuscation, and curl can get removed dom elements, while checking referrers can be faked.
The morale? Why try to even hide javascript? Include a short copyright notice and author information. If you want to hide it so an, say, authentication system cannot be hacked, consider strengthening the server-side so there are no open holes in server that are closed merely though javascript. Headers, and requests can easily be faked through curl or other tools.
If you really want to hide the javascript... don't use javascript. Use a complied langage of sorts (java applets, flash, activex) etc. (I wouldn't do this though, because it is not a very good option compared to native javascript).

Not possible.
If you just want to hide you business logic from user and not the manipulation of html controls of client side than you can use server side programming with ajax.