Hey I have an app written in js being accessed by $ node script.js
I want to visualize the output of it and thought it'd be a good idea to just "wrap" a HTML page around it. For example in the output in the terminal there are 2 values gradually increasing and I'd like to process both of them in a way that they could represent 2 bars that, according to the 2 values, rise accordingly.
However, I've never done anything in JS and I don't really know the best way to do it.
I found http://iceddev.com/blog/node-js-in-chrome/ to host a local server to run my .js on this but not even the console.log or any errors in the code in the index.js (which is basically opening the server and contains the content you want to see when navigating to it in Chrome) show up in the Chrome console so I am wondering if there is something else I can do here.
To run your script in the browser I recommended you to look this package http://browserify.org/ it compile your js script into browser compatible js
Related
So I want to play with the source code of a page. In this particular example it seems like the webpage is an Angular app (that i dont own) with source maps to *.ts files. The main code seems to all be in a bundle.js.
I want to be able to add console.log() statements to this code and learn more about how this webpage works.
I have tried editing the .ts sources (this doesn't work although I expected that).
I try editing the bundle.js but its so big that it causes my dev tools to crash.
Does anyone know of a VS Code plugin (or something similar) that would let me open the sources locally on my machine, edit them and see the changes reflected on the website.
If not what is the best path forward for being able to edit the local js of this page.
Firefox allows you to add log statements into the code when you're using the Debugger/Sources tab. Just right click the line you care about and then choose Add log. I believe Chrome allows something similar.
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 am a beginner in Javascript, I decided to practice Javascript by problem solving using it, I found an online judge that accepts Javascript V8 4.8.0 code.
So, I searched online to get that version of Javascript V8 on my machine, but I couldn't find any easy way, All the pages were explaining how to build it, and it seems to be a process that I don't need to go through.
Is there an easy way to compile and run command line apps written in Javascript on my machine?
Note: I don't want to use node.js because I tried using it's I/O and
as a beginner I think it is complex in some way.
Update: I found that package manager pbox.me which provides a version of V8 JavaScript Engine and I managed to install it.
Yet another problem appeared: whenever I try to run a js file writing d8 myfile.js in command line nothing happens as if it is an empty program, knowing that I tryied to d8.exe file and it is working, and I made sure the PATH is inserted in the environment variables.
What am I doing wrong?
The easiest way to get started with JavaScript is probably to use it in a browser. You can type simple things directly into the browser's JavaScript console (check the menu); or you can embed your code in a simple HTML document.
If you want, you can even pretty easily implement the readline()/print() functions, so you can pretend to be doing stdin/stdout based I/O: just read from an array of strings, and send output to console.log (or create DOM nodes if you want to be fancy and/or learn how to generate dynamic website content by hand).
Side note: V8 4.8 is severely outdated, don't use it to execute code you haven't written yourself.
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.
Ideally I wanted to use this in TextMate but I didn't find any feature besides the Show Web Preview which is nice for the fact I can set the interval to update the page, but definitely doesn't work for watching any file and also apply syntax highlighting or any format.
One neat example of what I wanted to achieve is to simulate exactly the same behavior as CoffeScript Try Now feature where you can type in one side and see what the file would look like in javascript.
So ideally I would open my .coffee file and then run coffee --watch on terminal which will track any file change for that specific file, so I could just pop another window inside my text editor which will just keep updating the coffeescript .js generated file.
like this, where the window on the left shows the current file and the window on the right shows the file being watched with specific interval.
I am not sure if I was clear enought, if not, please just let me know..
but basically I just want to see in real time what happens to my files after run a specific script but with syntax highlighting and anything else possible.
I am just testing this kaleidoscope app, it is really nice the way the visualization works, no editing is possible neither syntax highlighting features though but it is really good, so it makes me think that something like this would be really nice:
cheers
Emacs can do both of these things (and you're probably better off running it as a Cocoa app).
ediff works similarly to Kaleidoscope (minus the diagonal lines connecting the two revisions) and does let you edit the files without disturbing the diff process. By default you get the versions above one another but you can press | to toggle to side-by-side and m to expand to the full screen width (unfortunately this doesn't work properly with multiple monitors, at least in the version of Emacs I'm using.)
To tail/auto-revert things, there's auto-revert-mode and auto-revert-tail-mode built into Emacs.
emacswiki.org is pretty good if you're trying to figure out how to do something in Emacs, as is (duh) Stack Overflow. Mastering Emacs is a relatively new blog which has some great articles. There's also M-x all-things-emacs which links to some useful screencasts.
You can open the log file in OSX's Console log viewer utility that is used to monitor system logs. Simple as that. It will not show you diff's but it does emulate the tail -f functionality.