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,

Get the minimal amount of code used in JQuery/JSApi (legally)?

I have built a really simple script using JQuery/JSApi. I want to deploy it to my raspberry pi. As such, I need to make it only use the minimal amount of code possible (Pi is already full!).
It will not have a network connection, so let's say I just want to grab one file from the JSApi (as an example - I will not actually do this as it isn't legal).
So, I opened fiddler, opened my webpage, and saw what dependencies it had. After loading the JSApi, it fetched the following two files :
GET www.google.com/uds/api/visualization/1.0/69d4d6122bf8841d4832e052c2e3bf39/format+en,default+en.I.js HTTP/1.1
GET www.google.com/uds/?file=visualization&v=1 HTTP/1.1
So, two questions - firstly, is there any legal way for me to get this file and host it locally for JSApi?
Assuming no is the answer to this, let's assume the files are JQuery modules - where I believe this would be allowed. How would I grab them, and point to them locally? When I try to navigate to either of the addresses above, for example, I get an error message or nothing loads - so it is not possible to include these modules (or other JQuery modules) separately ?
Thank you!

I don't know if this will work in your exact setup, but you can do something like the following to get it pared down to the bare essentials:
Write up your webpage with the full jQuery package and any modules necessary (per your second example)
Pass all the javascript you're using through something like Google's Closure Compiler: https://closure-compiler.appspot.com/home
Include that compiled javascript, which will include only the absolutely necessary functions.

What language can I use to read directories and files from an HTML page?

I'm continuing the project I talked about in another thread here, but at the moment I have stopped because I can't figure out how to dynamically add content to the page. It's supposed to be a webapp that runs locally (it won't be hosted on a domain).
I thought I'd be able to do it with JS, however I found out it can't read files for security reasons. What I was planning to do was get a list of all the files and folders inside a given directory (using JS), then append a div for each folder (with more stuff inside) inside the content area of my page. Seeing how I couldn't do that with JS, I thought maybe I could do it with PHP using the same approach, but I didn't like the idea of having to run xampp just for this... if there's a way to have PHP running without xampp and/or a server, then it'd be great, but so far I haven't found anything about that... except downloading PHP, but I have no clue how to "use" the console from the browser and then have it append the divs to the page, since the console and the browser are "separated".
To make it a little more clear: is there a way to run PHP without a server, and if not, what other languages can I look up to?
At this point I'd also like to know how websites such as clipchamp.com work. Do you guys have a clue about that?

In order to run PHP, you'll indeed need a server with the right permissions on the folder.
For small local projects, I've seen Node.js used, the learning curve isn't too steep if you already know JS. Check out the fs module in Node for access to the filesystem.

I thought I'd be able to do it with JS, however I found out it can't read files for security reasons.
It can, just not when the JS itself is executing in a web browser. JS running in, for example, Windows Scripting Host or NodeJS would have no problems.
if there's a way to have PHP running without xampp and/or a server
You can run PHP from the command line, but if you want the output to be rendered in a browser then you really need to be dealing with HTTP, which requires a server.
There is always the option of PHP's built-in webserver.
is there a way to run PHP without a server, and if not, what other languages can I look up to?
It doesn't matter what language you use. You'll find it hard to pick one that can't read the file system. They will all suffer from the same limitations when it comes to interacting with a web browser though. You need to be talking HTTP.

That is the whole concept of a browser. A browser can not give more permission to the system then the user of the browser does.
You have afaik two options: Use a server on the machine you want to manipulate (there are all kind of flavors, you can use nearly every language for building a server) or use/create a browser plugin that can do it (Silverlight can have access to the file system under some restrictions).

how to read text from input file in javascript?

I have a text file i want to read in my html page,both are in the same directory and i am not running a server. I intend that my users use the script offline(basically text manipulation based on expressions and preserving new line characters) .
I tried ajax call but mostly cross domain origin problem occured and i know most of the users will have this security tighened up in many browsers , so its not of use to circumvent this in only in my browser.
I want to support many browsers including old browsers as in IE7,8 etc which do not support HTML5 filereader.for the same reason reading using filesystemobject or activex is not good.
Reading the file after user select it as input , is this possible?Otherwise i would have no option then using other technologies like php,java etc which may expect my user to setup these.
Please excuse me if i am repeating this but i am a beginner web developer. I know that reading local files via javascript is not possible but is there any other way?

If you can't support FileReader, then the answer is pretty much no (at least, if you want to support a large range of browsers rather than rely on convenient feature x of browser y). Unless : you indeed increase the requirements for running the application and get some sort of local server going (for instance node.js, Apache, TomCat, etc. but like you said this will greatly increase the requirements and become cumbersome for users).
You could also rethink what it is you're trying to achieve. What are the contents of the file you want to read ? Can't these contents be part of the HTML file you're serving to your users (i.e. a large JSON Object inside a script-tag ?)
On possibility of using node.js:
Node.js is quite easy to install and assuming you are requiring from your users to install it, you can use it as a local server, which is a nodejs script of about two lines in size :). Running it locally would also omit the need to upload anything anywhere as you can directly read from the file system using the fs-object (see sitepoint.com/accessing-the-file-system-in-node-js).
STILL: from both a design and ease-of-use-point of view you might want to resort to using either another technology, or include the text file content inside the HMTL file

Using Javascript to determine whether a file exists, LOCALLY

got some great feedback last time.
I'm essentially setting up a Wiki-type system on my local computer. I'm linking between HTML files, with some already existing and some not. I'm using XMLHttpRequest to check to see if the files exist.
The problem comes when I need to check files that are in different directories. I've come to find out this is a security thing in place. However, I'd like to disable it if possible, just for my local files. It seems rather odd that I can't have simple Javascript that returns the text on any web page at all, but even more so on my own computer.
I don't have any sort of server software running, just a bundle of HTML files with Javascript in them.
Thanks in advance!

javascript can not talk to the local filesystem. The reason for this is to keep people from writing destructive scripts that break your computer.

If this isn't a learning exercise, perhaps you might be interested in TiddlyWiki?

As you mention your self, "this is a security thing in place". In general, JavaScript is not allowed to access local files as it violates the sandbox.
However, have a look at these SO posts that discuss a few possible solutions:
Can JavaScript access a filesystem?
Local file access with javascript
You can also have a look at this HTML5 feature:
Reading local files in JavaScript