Windows 10 Pro + VsCode で CasperJS を試してみる

PhantomJS を設定したついでに capserjs も試してみる

参考にしたサイトはこちら

Windows 10 Pro + VsCode で PhantomJS を試してみる

VsCode-1.22.1

> node -v

v9.11.1

Download

より　phantomjs-2.1.1-windows.zip　をDL後、適当なフォルダに配置する(C:\Dev\tool\　以下)

C:\Dev\tool\phantomjs\bin　をPATHに追加する

CasperJS

よりcasperjs-1.1.4-1.zip　をDLして、解凍後適当なフォルダに設置する(C:\Dev\tool\　以下)

C:\Dev\tool\casperjs\bin を Path に追加する

VsCodeの設定

・拡張機能より

　Debugger for PhantomJS　をインストールする

　Code Runner　をインストールする

・フォルダを作成する

・ファイル -> フォルダを選ぶ　より上記フォルダを選択

・CTRL+SHIFT+D(デバッグボタン)

　->launch.jsonの構成や修正を押下して phantomjs を選択する

　　※jsファイルが存在すると表示されない

・launch.json に最下２行を追加する

"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "phantomjs",
        "request": "launch",
        "file": "${workspaceRoot}/app.js",
        "webRoot": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/phantomjs.exe",
        "runtimeArgs": [],
        "sourceMaps": true,
        "verboseDiagnosticLogging": true, # 追加
        "diagnosticLogging": true # 追加
    }
]

・npm init

・npm install phantomjs

・npm install casperjs

・echo.js を以下で作成

var casper = require("casper").create();

var links = [
    "http://google.com/",
    "http://yahoo.com/",
    "http://bing.com/"
];

casper.start();

casper.each(links, function(self, link) {
    this.thenOpen(link, function() {
        this.echo(this.getTitle() + " - " + link);
    });
});

casper.run();

・Code Runnerの設定

　ファイル

　-> 基本設定

　　-> 設定

　　　-> ワークスペースの設定

    "code-runner.executorMap": {
        "javascript": "casperjs",
    }

・右クリック->Run Codeで実行

[Running] casperjs "c:\Dev\code\ndtest\ndcasperjs\echo.js"
Google - http://google.com/
Yahoo - http://yahoo.com/
Bing - http://bing.com/

[Done] exited with code=0 in 14.741 seconds

・デバック -> デバックの開始　でデバックコンソールに以下が表示される

　※break point は無効のようだ

Verbose logs are written to C:\Users\User_Name\.vscode\extensions\vscode-phantomjs-debug.txt
～
OS: win32 x64
Adapter node: v7.9.0 x64
vscode-chrome-debug-core: 3.1.0
～