need some help please.
How to run nodejs code that just runs over some JSON data and prints it out, in the browser? I know in the command line, we just enter node nameOfFile.js , but how can I run this in the browser, so that I could add CSS to it to play around with it etc.?
Thanks
Node is simply an engine that uses Google's V8 to interpret JavaScript, but adds a few features.
It has a few additions to it. But if your script isn't too localized to NodeJS, you should be able to run it just fine in the browser. Otherwise you'll have to make some polyfills for NodeJS-specific code (like Buffer for instance).
In-browser, you need to reference your JavaScript from an HTML page. This is done with a script tag:
<script src="path/to/your/script.js"></script>
This tag is usually placed within <head> tags, but can be elsewhere as-needed.
From there, you can set HTML in the document:
document.body.innerHTML = '<h1>Hello, world</h1>';
Related
Guten morgen.
I need to run a specific js script via adding it to a basic html file, so the script would be running as I open index.html (btw, if you know a better way to simply run a specific script with just one click, I'd appreciate to know it).
So, here I have a script that uses FileSync (fs) with:
const fs = require('fs');
But since the "require" method himself requires "require.js', which requires "main.js" (how funny is that) to run properly, i'm getting stuck. So, to run my script.js I need to write another script to make require.js work, but that's not what I was planning to waste my time on.
I'm not a Web-learner and I'm not going to study all the stuff needed, I just need to run a particular JS script.
P.S. Yes, I'm planning to write a proper script on a python, but as I already have a working (not quite right) solution on JS, I want to try it first.
something.js:
function hello(){
alert("Hello");
}
index.html:
<script src="something.js"></script>
<button onclick="hello()">Clicky</button>
of course this is not a well-formed html, but it's okay for a test.
require is about handling modules and the like in node.js, in html you have the <script> tag where you can write code directly or load something from an external source.
Note that if you have node.js code, that won't necessarily work in a browser.
I am looking for a way to run individual commands in VS Code but not the whole file. I do work on client websites where a lot of my code will not run in a standard debugger or in the Quokka extension because it relies on the page that I am working on (and running in the debugger does not perfectly emulate how my code will run. But sometimes I like to run a few lines of code or a single function separately to make sure I have it set right without having to copy my code over to the online platform used to execute it and load up a preview link. Normally what I like to do is open a new chrome tab at about:blank and use the dev console there to paste in my code and this is my "playground" of sorts. Is there any form of active JS engine that I can do this in without having to save these lines to a new file and run the debugger?
If you looking all these things in VS code I think it will be a bit hard because of this.
to run JS code snippet VS code must have JS engine like same for PHP its compiler or same for any other language and adding these compilers in IED will again make these IEDs fat and CPU costly.
BUT Still, you can do one thing if you have a node js installed open Terminal outside or inside the VS code.
and type
$node
This will open a JS playground. Where you can execute js code snippets
but here you will not be able to access DOM, WINDOW object, etc.
In case you found any plugin which executes js code in VS CODE with DOM, window please let me know.
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'm not well familiar with JS, as I mostly develop desktop applications.
But I do know how to use Firebug ;)
I'm wondering how can I find the sequence those much *.js files loaded with HTML being executed and where it starts from? I have no clue how javascript code works.. And I need your tips on it.
I just would like to debug one website page and see how it works (like I do it in MS Studio by stepping into code which everytime starts from the same entry point).
Where do javacript code starts?
I'm sorry if my question sounds foolish..
Javascript starts at the top of the file.
Everything gets executed from top to bottom and there is no such 'start method' you see in codes like (OO) Java or other desktop languages.
You can see it as a procedural language in this case. You can do Object Oriented-like things in Javascript though.
Scripts are loaded and interpreted in the order in which you inserted them into the markup. You can set breakpoints in Firebug by going to "Scripts" and you should see the breakpoints on the left panel (you may have to reload the page). Breakpoints can also be created in your actual code by just typing debugger; and when you run it in the browser it'll stop execution on that line.
JavaScript code starts and executes in the order it appears in the page.
If you have script tags to include external JS files, the code in these files will be run sequentially in the order they appear in the file.
For example let's say we have the following:
<script type="text/javascript" src="file1.js" />
<script type="text/javascript">
alert(2);
</script>
<script type="text/javascript" src="file2.js" />
Let's say file1.js contains alert(1); and file2.js contains alert(3);.
You would receive 3 alerts in the following order: '1', '2', '3'.
You could debug this by either putting debug; in any of the 3 files (and turning debugging on in Firebug) or by using Firebug to place breakpoints in any of the 3 files (using the dropdown file selector).
Firebug is an add on. It can show you source code, response etc. Html, CSS, Javascript, Ajax, Cookies and many things. You can also debug javascript here. But first you need to install this add on. Go to tools option on your browser and install this "firebug" add-on. You can find it by searching.
Here you can debug script part like visual studio. But you cannot debug source code because it's been run on the server.
But as javascript is a client side code.After installing
1. Right click on mouse. choose install with firebug
2. Choose script tab.
3. Set debugger like VS.
4. Debug.
I will try to summarize the best I can what I need and what is blocking me to do it.
What I need
I need to append script tags to the head of an html file, BUT during my "build" process. I'm using ant as a automation build tool, and I would like to avoid placing tokens in my HTML file to then replace it with ant, or also I will like to avoid any midway solution using regular expression matching. Waht I would really like to use is plain javascript running through rhino javascript interpreter and exceute it easily from an ant task, and finally add the script tag dinamically.
What is blocking me?
I really don't know anyway that I can load an html file without issuing a GET or a POST HTTP methods. Cause I'm building my code from source I don't have it under an HTTP server, so I wish I could find someway to load the HTML DOM into a javascript variable and then write it with the new script tag that I need.
I need all the DOM manipulation features without having a browser that renders the HTML file.
Best!
Demian
From what I understand you would like to have a valid DOM object from an HTML file, as if you were running in a browser, but do it "offline"? e.g. be able to do a jQuery selector on the DOM and edit it?
You can always start by looking into an embeded open source browser (http://www.chromium.org/)?
But I would look into node.js, see this question Can I use jQuery with Node.js?
This will allow you to do DOM traversing and modifications without a browser as far as I understand