Is there a way, like an extension or application, in Chrome to create and run .js files in Chrome?
if you don't want to explicitly create a js file but still want to test your javascript code, you can use snippets to run your JS code.
Follow the steps here:
Open Dev Tools
Go to Sources Tab
Under Sources tab go to snippets, + New snippet
Paste your JS code in the editor then run Command + Enter on a Mac, or Ctrl + Enter on Windows or Linux. You should see the output in console if you are using console.log or similar to test. You can edit the current web page that you have open or run scripts, load more javascript files. (Just note: this snippets are not stored on as a js file, unless you explicitly did, on your computer so if you remove chrome you will lose all your snippets);
You also have a option to save as your snippet if you right click on your snippet.
Try this:
1. Install Node.js from https://nodejs.org/
2. Place your JavaScript code into a .js file (e.g. someCode.js)
3. Open a cmd shell (or Terminal on Mac) and use Node's Read-Eval-Print-Loop (REPL) to execute someCode.js like this:
> node someCode.js
Hope this helps!
You should write in file:
<script>
//write your JavaScript code here
</script>
save it with .html extension and open with browser.
For example:
// this is test.html
<script>
alert("Hello");
var a = 5;
function incr(arg){
arg++;
return arg;
}
alert(a);
</script>
You need an HTML page to load a JS file.
You don't necessarily need to have an HTML page. Open Chrome, press Ctrl+Shift+j and it opens the JavaScript console where you can write and test your code.
- Chrome JavaScript Console
How to create a Javascript Bookmark in Chrome:
You can use a Javascript bookmark: https://helloacm.com/how-to-write-chrome-bookmark-scripts-step-by-step-tutorial-with-a-steemit-example/. Just create a bookmark to look like this:
Ex:
Name:
Test javascript bookmark in Chrome
URL:
javascript:alert('Hello world!');
Just precede the URL with javascript:, followed by your Javascript code. No space after the colon is required.
Here's how it looks as I'm typing it in:
Now save and then click on your newly-created Javascript bookmark, and you'll see this:
You can do multi-line scripts too. If you include any comments, however, be sure to use the C-style multi-line comments ONLY (/* comment */), and NOT the C++-style single-line comments (// comment), as they will interfere. Here's an example:
URL:
javascript:
/* This is my javascript demo */
function multiply(a, b)
{
return a * b;
}
var a = 1.4108;
var b = 3.7654;
var result = multiply(a, b);
alert('The result of ' + a + ' x ' + b + ' = ' + result.toFixed(4));
And here's what it looks like as you edit the bookmark, after copying and pasting the above multi-line script into the URL field for the bookmark:
.
And here's the output when you click on it:
References:
https://superuser.com/questions/192437/case-sensitive-searches-in-google-chrome/582280#582280
https://gist.github.com/borisdiakur/9f9d751b4c9cf5acafa2
Google search for "chrome javascript() in bookmark"
https://helloacm.com/how-to-write-chrome-bookmark-scripts-step-by-step-tutorial-with-a-steemit-example/
https://helloacm.com/how-to-write-chrome-bookmark-scripts-step-by-step-tutorial-with-a-steemit-example/
https://javascript.info/hello-world
JavaScript equivalent to printf/String.Format
Usually one uses text editor to create source files (like JavaScript). I use VisualStudio which have intellisence supprt for JavaScript, but any other editor will do (vim or notepad on Windows are both fine).
To run JavaScript by itself you need something that can do that. I.e. on Windows you can directly run script from console using CScript script.js command. There are other ways to run JavaScript on Windows and other OS.
Browsers (like Chrome) do not run JavaScript by itself, only as part of a page or extensions. It is unclear what one would expect of browser to do with JavaScript by itself.
You can also open your js file path in the chrome browser which will only display text.
However you can dynamically create the page by including:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'myjs.js';
document.head.appendChild(script);
Now you can have access to the js variables and functions in the console.
Now when you explore the elements it should have included.
So i guess you dont need a html file.
The easiest way is to run js file is to install nodejs in Your system and then go to the directory like shown in the below link click to show picture
first, write node keyword and then type the name of your file
so to run your js code in node write like i.e. node index
I hope you understand this
Open a basic text editor and type out your html. Save it as .html
If you type in file:///C:/ into the address bar you can then navigate to your chosen file and run it.
If you want to open a file that is on a server type in file:/// and instead of C:/ the first letter of the server followed by :/.
Related
I am new both to both Stackoverflow and to Javascript, so please do not penalize me too much if some of my terminologies are incorrect.
My programming reference is Matlab that has a script window to write scripts, a command window below to run code and test variables, and a workspace window to the side that displays all variables with their values and their types.
<script>
var nm = prompt("What is your name?");
document.write(nm);
</script>
I want to test run the above snippet of Javascript in Dreamweaver, Brackets, Atom, and VS Code. Do these 4 have a command window (not to be confused with the DOS prompt terminal in VS Code) that simply runs snippets of javascript code as it is without bringing node.js into this, and another separate window that lists program variables with their values and types?
How do other Javascript programmers test run snippets and monitor their variables?
Thanks
You can just use the JavaScript console to test your code in a command-line style interface. To get to it, follow the instructions for the various browsers you may be using:
Chrome and Firefox
Right-click or ctrl-click anywhere on the page, and then click Inspect Element. From the new window, click on Console.
Safari
Right-click or ctrl-click anywhere on the page, and then click Inspect Element. From the new window, click on Console. You can also use the keyboard shortcut cmd + alt/option + i.
I am making Google Chrome Extension which gets the text from ACE Editor. But as soon as I create ACE object, formatting is lost and I am not able to get the Java code with indentation. The result also contains many unwanted characters.
I have used following code.
var editor = ace.edit('editor');
var code = editor.getValue();
Before my code is executed
After my code is executed
But when I run same code from developer console, it works fine.
Please suggest what is wrong or any other way to get full code with formatting using DOM element?
This happens because code in chrome extension doesn't have access to the code running in the page.
When you call ace.edit on existing editor env property of the element and creates a new editor instead.
As a workaround you can create a content script which will run in the page context, and communicate with the rest of extensions using events or postMessage. See https://stackoverflow.com/a/13292994/1743328 for more details
I can't figure out how to use imacros with JavaScript. I have looked at their Help, have seen countless examples here on Stack Overflow, but don't know what am missing. It has not been explained clearly anywhere.
Here is what I tried:
Used the example explained in their help file here:
http://wiki.imacros.net/JavaScript
But nothing happens when I click the 'Click Here to Run' link (even in IE with ActiveX). NOTE: I don't have imacros for IE - the example shown above has image of the macro start in IE, but run in Firefox. And no further explanation..
Tried to import a JS file into imacros, but it doesn't seem to be working for me.
When I use code like the following:
var macro;
macro = "CODE:";
macro += "XXXXXX" + "\n";
macro += "XXXXXX" + "\n";
....
iimPlay(macro);
It says:
"Error -1100: Unknown command: VAR at line: 1"
Tried to use the above inside a script tag of an HTML page, & load the functions on page-load/click. But that doesn't work either.
What am I doing wrong, and what do I need to do?
Soon after I posted this, I think I got it to work for a while. I was able to open a JS file which opened a URL. So I had deleted the Q. But now it isn't working again, and I can't figure out why.. Can somebody help?
Basically I am having the exact same problem as this person here:
Javascript and Imacro to Open Google.com I get the same 'unknown command: var' as him. And their question remains unresolved too.
It looks like you are trying to run javascript inside an iim file. Open notepad or another text editor and paste the following code:
var test;
test ="CODE:";
test +="SET !ERRORIGNORE YES "+"\n";
test +="URL GOTO=www.google.com "+"\n";
iimPlay(test)
Save the file with a .js extension. Next open up firefox and the iMacros addon. Go to Manage -> Settings -> Paths Tab -> Folder Datasource. Enter the path where you saved the file above. Refresh iMacros by clicking the iMacro button on and off. The javascript file should show up in the left pane. Run the file to test.
You should notice the icon to the left of the file name is different for the javascript files and the extension is ".js" instead of ".iim".
Good answer Creamstout83
I would also add this to answer above. Un checking this option will speed up the process. And checking it will enable better debugging.
If you're experiencing this problem while using Chrome to run iMacros; the answer is really simple:
Download Firefox and run the iMacros plugin on there.
I experienced the same problem, receiving the error message: "Error -1100: Unknown command: VAR at line: 1", while using Chrome.
But with Firefox I can now run javascript files, have more options to play around with, and less bugs to disrupt my scrapes.
Reference:
Using the new code snippets feature in google chrome
I am using the code snippets in google chrome, so say I have a snippet file.
check_consistency.js
Is there an api or a global object through which we can run the snippet directly from the command line, something like:
window.runSnippet('check_consistency.js')
or maybe call methods defined in the snippet directly.
Workflow Tip 1
I also want to see this functionality added. Meanwhile, perhaps try opening the Sources where (as you know) you can select a snippet and right click it to run it. You may or may not know that you can tap Esc on this page in order to show the console at the same time as your snippets:
Workflow Tip 2
The snippets documentation also mentions
The ability to quickly locate a specific file can be essential to a developer's workflow. The DevTools allow you to search across all script, stylesheet and snippet files using the following shortcuts:
Ctrl + O (Windows, Linux)
Cmd + O (Mac OSX)
which will work regardless of the panel you are currently in.
...and...
A keyboard shortcut is also available for easily executing a snippet - just select your snippet then use Ctrl/Cmd + Enter to run it. This replicates the behavior of the Run (>) button - currently in the Sources console, but which will be moving into the debugger control in the near future.
What this means is that while in the console you can press Ctrl/Cmd+O to quickly select your snippet, and then press Cmd/Control+Enter to run it.
I have a work around for when I'm running snippets a bunch of times on a site. I wrap my snippet code in a function and assign it to a global variable.
e.g.,
window.mySnippet = function (value) {
console.log(value.toUpperCase());
};
When I run this snippet I can now run
mySnippet('hello world');
-> "HELLO WORLD"
You still have to run the snippet once to load it into memory, but it's better than nothing.
For example if I run on some page in Chrome with following code:
<div onclick="someFunction('test')"></div>
I would like to know which js file contains "someFunction". Is it possible and how? (I suppose it could be done with debugging but don't know how)
In Firefox with Web Developer add-on, Information/View Javascript/Expand All, search for "someFunction".
There are of course, a lot of other ways to do this too, but this add-on puts all JS from the page into one browser which makes it simple to search for anything page-wide.
what I do is: [ Assuming you have access to the source code ]
grep -r "function someFunction" .
where . is directory where to begin recursive search for the pattern. It will show you all files which contains pattern "function someFunction".
By the way, if you have a lot of hits but you want to search in the directory which generates them, you can discard results that contains:
grep -r "function someFunction" | grep -v "withouth this text"
hope that helps! on windows maybe you can use this with cygwin ?
This of course will not work if someFunction is hosted on external host...
Try to save page in file system (menu -> save page as -> web bage completely)
and find you function in files by text searcher.
Write the function name in google console without parenthesis
e.g- for function submit(a,b) - i want to know where is the submit function.
just write submit in the console.The output will be definition of the function. Click on the output, you will be redirected to the function.You can see the file name at the top of the developer tools in source tab.