Pages

VS Code setup – JavaScript debugging

May 14, 2018
全新安裝 Visual Studio Code ,建立一組 JavaScript 與 HTML 網頁,並在 Visual Studio Code 中直接啟動 Debug 模式。
首先到微軟網站下載並安裝 Install Visual Studio Code
進入 IDE 介面,左側是主要功能區,以下會用到這三項:
  1. 檢視目前開啟的目錄
  2. Debug
  3. 下載 VS Code Extension
Image(2)

Install Extension

要模擬網站執行網頁與本機 Debug 需要安裝以下兩個 Extension ,可以直接從 IDE > Extension > 輸入 live server > Install (如下圖)。
或到網站下載安裝。

Image(3)

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
提供本機上的網站伺服器,支援動態編輯內容儲存後,網頁自動直接更新

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
產品說明的很清楚: Debug your JavaScript code running in Google Chrome from VS Code.
安裝好兩個 Extension 後,關閉並重新開啟 VS Code

建立 Web 網站目錄與 launch.json

開啟一個全空的檔案目錄
Image(4)

Image(5)

index.html 中輸入
<h1></h1>
<script src="./index.js"></script>


index.js 中輸入
window.onload = function () {
var myword="hello world!";
document.querySelector('h1').innerHTML=myword;
}

新增 launch.json
點擊左側 Debug > [No Configuration] 右側 > Add Configuration > Chrome

Image(6)

複製以下內容至 launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": false,
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/*", // Example: "webpack:///src/app.js" -> "/users/me/project/src/app.js"
            }
        }
    ]
}


啟動網站與 Debug


開啟 index.js 設定中斷點
Image(7)

在 IDE 最下方點擊 [Go Live] 啟動 Live Server
本機網址是 http://localhost:5500
Image(8)

Start Debugging (F5)
有三種方式啟動 Debugging
  1. F5
  2. 選單 > Debug > Start Debugging
  3. 點擊 DEBUG 右側綠色 Icon 以 Debug 模式啟動網頁(如下圖 1)
順利的話,執行程序在所指定中斷點時暫停時,可以逐步移動 (如下圖 2),
並可觀察與直接修改變數(如下圖 3)。

Image(9)



Read more ...

On lick to Deploy Azure SQL

Apr 6, 2018

image

Read more ...

PowerDesigner 異動 PDM 後產生 T-SQL

Jan 22, 2018

在 PowerDesigner 編修後可以產生完整所有資料表或其他結構的 T-SQL 語法,這動作適用於第一次建立資料庫。

日後有修改 PDM 內容時,可以透過檔案或連線資料庫進行差異比對,產生異動的 T-SQL 語法,

原理與 Visual Studio 資料庫專案做 Schema Compare 類似。

步驟如下:

1. 開啟 PDM ,點擊選單 Database > Apply Model to Database

Image(49)

2. 選擇 Archived PDM 的路徑,並產生新的 Archived 檔案

Image(50)

第一次產生的 T-SQL 語法時建議同時勾選 Automatic Archived,除了保留版本也可以作為日後比對的基礎。

Image(51)

若是沒有 Archived PDM 檔案,可以將 PDM 另儲存為 Archived PDM 格式。

Image(52)



Reference source:

Modifying a Database

http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc38058.1600/doc/html/rad1232021447225.html

Archiving a PDM

http://infocenter-archive.sybase.com/help/index.jsp?topic=/com.sybase.stf.powerdesigner.docs_12.0.0/html/daug/daugp22.htm

Read more ...

Evernote 表格內容如何加密

Sep 10, 2017
當內容中有表格或水平水格線...等,「加密選取的文字」是不能選取的。
Image

不過卻可以複製貼上的方式,將 表格 偷渡進入加密文字中。
步驟 1
先選取幾行純文字內容做「加密選取的文字」
步驟 2
「顯示加密文字」後,在原本加密的內容中貼上表格
Image
Read more ...

Firewall open Protocol 47 GRE

Nov 10, 2016
在安裝 VPN 時最後需要在防火牆設定:
For PPTP: 1723 TCP and Protocol 47 GRE (also known as PPTP Pass-through)
1723 TCP 是指在防火牆上開啟一個  1723 PORT,是很常見的設定方式。
而要如何設定 Protocol 47 GRE ??
以下就是設定的步驟,主要是前兩個動作與開放一個 PORT做法不一樣

image

image

image
以下就是一連串的 NEXT 直到最後一部輸入一個名稱即可。
image

image

image

image
Read more ...

T-SQL 一次查詢庫存天數分析

Oct 25, 2016

image

前提

ERP 系統中在財務方面有帳齡分析;在庫存方面有庫齡分析,這是要分析目前在庫產品的存放天數。

這裡有個簡化的範例資料,分別有一個庫存主檔與入庫明細檔,

  • 庫存主檔有三個產品,經銷售後目前庫存量分別為 8, 24, 36
  • 每項產品每個月均採購 10 個

image

最後要推算出

各項產品庫存分別在那月份採購 與 平均在庫天數

image

範例資料可以點擊後取得: Create T-SQL script


實作步驟

實作過程使用到 SQL Server 提供 T-SQL (較特別)的方法,包括:


1.查出各產品最近一次的入庫單

image

2. 以 CTE 往前一次交易推算

image

3  合計平均庫存天數 = 總庫存天數 / 庫存量

image

4 PIVOT 列出分布在各月份入庫數

完整 T-SQL script 如下

Read more ...

Oppo R9 Turn on/off developer mode

Jul 30, 2016

First time turn on developer mode

Go to Setting > About phone, type [Build number] many times, when system show:

No need to proceed this option, you are already a developer.

image


Turn off / on developer mode

Go to Settings > Additional settings > Developer options

Screenshot_2016-07-30-17-11-14-56


image


then turn on (1) Developer options and (2) USB debugging

Screenshot_2016-07-30-17-11-58-47

Read more ...