How to preview page when doing javascript developement with Vim - javascript

I'm learning to do javascript development with Vim
I would like to know how other people do to preview the result of your javascript code
I can of course manually launch and refresh a browser
but there must be an automatic way

I use xdotool[1] to automate the "switch focus to browser, hit f5" part. All this is in a shell script, say reload.sh, and I call it from vim by mapping like this:
:nmap <C-L> :!reload.sh<CR>
reload.sh (untested, you may need to massage it a bit):
#!/bin/sh
WID=`xdotool search "Mozilla Firefox" | head -1`
xdotool windowactivate --sync $WID
xdotool type f5
[1] http://www.semicomplete.com/projects/xdotool/

Related

Is there a way to get a web page and apply it a javascript command like in chrome console from cpp or bash?

Is there a way ( library or program ) to download the result of a web page (like curl or wget) where you can just apply some javascript the same way you could on chrome's developer tools from cpp or bash ?
The goal would be to use it with jQuery's selectors (admitting said website uses jQuery. Or better, to add jQuery to the processed html to be able to process it that way)
I haven't found anything on the subject on google.
I'm not really sure if I made myself clear, so i'll provide an exemple.
For instance let's say I want to get this question's (How to undo last commit(s) in Git?) accepted answer's code, it'd do
content = page.apply_js("$('div.accepted-answer pre code').text()");
and it would make content contain
$ git commit -m "Something terribly misguided" (1)
$ git reset HEAD~ (2)
<< edit files as necessary >> (3)
$ git add ... (4)
$ git commit -c ORIG_HEAD (5)
I know that there are some shady details left unexplicited here, including type-correctness, but that is not the point.

wscript cscript with javascript to use COM with node.js

OS: windows 10 Node: v6.9.4 iTunes 12.5.5.5
I'm trying to write a node.js app that communicates with itunes, it will do a lot of things and i want to capture the response and show in a web page.
what i'm trying to do right now to understand this wscript thing is run a node file, that it will keep running to output on the 'change song' event some info about the tack.
After i did some research i made to a point, but now i'm stuck.
I have no knowledge on windows ecosystem coding and is in this part that i'm struggling
searching the web i found this solution.
i don't find why i can on cmd use cscript o wscript but inside the .js file i need to use wscript
/* itunes open and playing a song */
var itunes = WScript.CreateObject("iTunes.Application");
var currentTrack = itunes.CurrentTrack;
WScript.Echo("name: " + currentTrack.Name + " artist: " + currentTrack.Artist);
open a cmd, go to that folder, and run
cscript /nologo myItunesScript.js
/* /nologo prevent to show some default cmd text*/
the program will run, output the music playing and it will close itself
If i do the same thing with wscript i don't know why but it show a popup window with the result instead of showing on the cmd screen.
On this page http://www.joshkunz.com/iTunesControl/main.html show a lot of things that i can do and even work with events.
I didn't find any app on npm that does some magic and makes my life easier.
So if someone can give some north, i will appreciate a lot.
EDIT: It is possible to connect to "iTunes.Application" without WScript from node?
If don't, is possible to listen for events from the output o WScript? (like in socket.io, you connect to someting and keep listening for things)
The question isn't clear I probably shouldn't of answered.
This answer specifically address this from the question;
If i do the same thing with wscript i don't know why but it show a popup window with the result instead of showing on the cmd screen.
You may be confusing what cscript.exe and wscript.exe are.
Both programs are the WSH (Windows Script Host, also confusingly known as WScript).
cscript.exe - The command line version
wscript.exe - The Windows GUI version
Both run VBScript but output the results differently, here is a simple example to demonstrate.
The following script will output the phrase Hello World;
Dim output: output = "Hello World"
WScript.Echo output
Using cscript.exe the output is;
>cscript //nologo "test.vbs"
Hello World
Using wscript.exe the output is;
>wscript //nologo "test.vbs"

View CoffeeScript as Compiled JavaScript

I am trying to learn coffeescript. I installed the Sublime package 'BetterCoffeeScript', and I am seeing the syntax highlighting, but I can't figure out how to view my coffeescript as compiled javascript. When I go to the command pallet and click Coffee: Display JS, it just generates a new blank file. How do I get this to show the compiled JS? Also, what is the first key that is shown for the keyboard shortcut? I attached a screenshot.
Answer taken from https://github.com/aponxi/sublime-better-coffeescript/issues/142
In terminal, run which coffee to see where coffee is installed.
If it's /usr/bin/coffee, you should be fine.
If it's /usr/local/bin/coffee (or anything else), go to Sublime, Preferences > Package Settings > Better CoffeeScript > Settings - User
Add "binDir": "/usr/local/bin" (or whatever which said it was) there.

How to parse DOM (REACT)

I am trying to scrape data from a website. The website uses Facebook's React. As such the source code that I can parse using Jaunt is completely different to the code I see when inspecting the elements using Chrome's inspector.
I know very little about all of this, but having done some research I think this is something to do with DOM rather than the source code. I need a way to be able to get my hands on this DOM code as the original source contains nothing I want, but I don't have the foggiest idea where to begin (even having read many answers on here).
Here is an example of one the pages I want to scrape. For example to scrape the description I'd want to grab what is in between the tag:
<span class="light-font extended-card-description list-group-item">Example description....</span>
But as you can see this element only appears when you "Inspect Element", and not when I just view the page's source.
My question to you geniuses on here is, how can I grab this DOM Code and start scraping the elements I actually want to?
Forgive me if my terminology is completely off but as I say this is a completely new area for me, and I've done the research that I can.
Thank you very much in advance!
ReactJS, like many other Javascript libraries / frameworks, uses client-side code (Javascript) to render the final HTML. This means that when you, Jaunt, or your browser fetch the HTML source code from the server, it doesn't yet contain the final code the user will see. The browser needs to run the Javascript program(s) contained in the page, in order to generate the final content you wish to scrape.
My favorite tool for this kind of job is CasperJS
It (or rather the PhantomJS tool that CasperJS uses) is a headless browser, meaning it's a version of Webkit (like Chrome or Safari) that has been stripped of all the GUI (windows, buttons, menus.) What's left is a tool that you can run from a terminal or from your Java program. It won't show any window on the screen, but it will fetch the webpages you ask it to; run any Javascript they contain; and then respond to your commands, such as "click on this link", "give me that text", "capture a screenshot", and so on.
Let's start with a simple ReactJS example:
We want to scrape the "Hello John" text, but if you look at the plain HTML source (Ctrl+U or Alt+Ctrl+U) you won't see it. On the other hand, if you open the console in your browser and use the following selector, you will get the text:
> document.querySelector('#helloExample .playgroundPreview').textContent
"Hello John"
Here is a simple CasperJS script to do the same thing:
var casper = require("casper").create();
casper.start("http://facebook.github.io/react/index.html", function() {
this.echo(this.fetchText("#helloExample .playgroundPreview"));
});
casper.run();
You can save it as hello.js and execute it with casperjs hello.js from a terminal, or use the equivalent Java code Runtime.getRuntime().exec(...)
Here is a better script, that avoids loading images and third-party resources (such as Facebook button, Twitter button, Google Analytics, and such) cutting the loading time by half. It also adds a waitForSelector step, so that we don't risk trying to fetch the text before ReactJS has had a chance to create it.
var casper = require("casper").create({
pageSettings: {
loadImages: false
}
});
casper.on('resource.requested', function(requestData, request) {
if (requestData.url.indexOf("http://facebook.github.io/") != 0) {
request.abort();
}
});
casper.start("http://facebook.github.io/react/index.html", function() {
this.waitForSelector("#helloExample .playgroundPreview", function() {
this.echo(this.fetchText("#helloExample .playgroundPreview"));
});
});
casper.run();
How to install CasperJS
I have had some trouble scraping ReactJS and other modern Javascript pages with the older versions of PhantomJS and CasperJS, so I recommend installing PhantomJS 2.0 and the latest CasperJS from GitHub.
For PhantomJS you can just download the official 2.0 package.
For CasperJS, since it's a Python script, you should be able to check out the latest commit from GitHub and link bin/casperjs onto your PATH. Here's a script for Linux or Mac OS X:
> git clone git://github.com/n1k0/casperjs.git
> cd casperjs
> ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs
You may also want to comment out the line printing Warning PhantomJS v2.0 ... from your bin/bootstrap.js file.

How to find .js file where certain js function is declared (from Chrome)?

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.

Categories