[VSCode] 如何在 VSCode 搭配 XDebug 偵錯 PHP 程式

Xdebug 3 已經正式釋出, 不僅在效能上提升, 在設定上也變得簡單許多。

今天來介紹如何在 VSCode 上使用 XDebug 來偵錯 PHP 程式。

環境

• Windows 10
• VSCode v1.52.0
• PHP v7.4.12
• XDebug v3.0.0

PHP 在本機上的環境變數設定，請參考 如何整合設定 PHP 的開發環境至 Visual Studio Code

PHP 加上 Xdebug

下載 PHP XDebug，請務必下載對應 PHP 的版本

php.ini 設定檔需加上 XDebug 的設定來開啟 debug 模式

zend_extension 請設定您的 PHP XDebug 的檔案位置

[xdebug]
zend_extension="D:\_devlib\php\xdebug\php_xdebug-3.0.0-7.4-vc15-x86_64.dll"

xdebug.mode=debug
xdebug.start_with_request=yes

; xdebug 3 版 port 預設為 9003, 若想維持與 2 版一樣的 9000 port 則可變更 client_port 的值
;xdebug.client_port = 9000

XDebug v3 的設定是不是精簡許多?

確認 PHP 是否正確掛載 XDebug 的 extension

$ php -v

顯示應會如下 (必須出現 with Xdebug …)

PHP 7.4.12 (cli) (built: Oct 27 2020 17:18:47) ( ZTS Visual C++ 2017 x64 )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans

安裝 VSCode 的 PHP Debug 套件

• PHP Debug by Felix Becker

或者是安裝 PHP Productive Pack 套件包增加生產力

VSCode 的偵錯設定

在 VSCode 開啟 PHP 專案，點 "執行" 選擇 "新增組態"，選擇 "PHP"

即會自動產生對應程式語言的偵錯設定檔 .vscode/launch.json

由於目前使用 XDebug 的版本是 v3.0.0，預設的 port 要改成 9003 才行

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9003
        }
    ]
}

執行偵錯

下圖為一個簡單的 PHP 檔案，前面有紅點為指定偵錯的中斷點

1. 先在程式加上偵錯中斷點
2. 執行偵錯

• Listen for XDebug (偵錯監聽中，需在終端機或網站執行到此行程式才會觸發偵錯)
• Lunch currently open script (即會在 focus 的 PHP 程式啟動偵錯)

1. 偵錯步驟 (繼續/不進入函式/逐步執行/跳離函式/重新啟動/停止)

在偵錯的面板上即可看到偵錯的訊息

例如此例在程式跳到第 5 行時, $x 的變數值為 "VSCode + PHP Debug mode!"

偵錯 PHP 就是這麼簡單!

[Composer] v2.0 已釋出! 來更新至最新的 Composer 2.0 版本吧!

2020-10-24 Composer 2.0 正式釋出!

關於 Composer 2.0 新功能

• 改善效能 50% 以上 (這個很需要啊)
• 架構變更及確定性：vendor 更新不受網路錯誤干擾
• Runtime 特徵 (可在 composer.json 設定 "composer-runtime-api": "^2.0")
• 錯誤訊息改善
• 暫時限制部分更新 (composer update vendor/package:1.0.*)

如何更新至 Composer 2.0

Composer 2.0 基本上可以順利快速升級

• 2.0 版本仍支援 PHP 5.3 以上版本
• composer.lock 檔案可在版本間互相操作，可更新至 2.0 版本或是回復
• 大多數的命令在 2.0 保持一致

若原先使用 Composer 1.x 版本，執行 composer self-update 則會更新 1.x 的主要穩定版本

更新至 2.0 只要執行以下命令

composer self-update --2

若隨時要變更至 1.x 版本，則執行

composer self-update --1

向下相容問題

• plugings: 需要更新支援 Composer 2
• 避免相容性錯誤，可在部署至 production 時執行 composer check-platform-reqs --no-dev
• Repository 優先性：若套件存在於較高優先的儲存庫，即會完全忽略較低優先性的儲存庫
• 無效的 PSR-0 / PSR-4 設定將不自動載入 optimized-autoloader 模式

未來如何

根據發佈消息，Composer 2.1 應該還是會支援 PHP 5.3，但 Composer 2.2 就會要求要 PHP 7.1.3 以上版本。

References

• Composer 2.0 is now available!
• Upgrade guides for Composer 1.x to 2.0

[Laravel] Laravel 8 搶先玩

Laravel 8 即將在 September 8, 2020 釋出！

今天就搶先來玩一下囉～

更新 Laravel Installer

先來把 Laravel Installer 更新到最新版本 4.0.0

方法 1: 直接修改本機全域的 composer.json

把 laravel/installer 的版本改成 "^4.0"

{
    "require": {
        ...
        "laravel/installer": "^4.0"
    }
}

再執行全域更新

composer global update

法方 2: 移除再重裝 Laravel Installer

先移除

composer global remove laravel/installer

再安裝最新版本

composer global require laravel/installer

確認版本是否為新版

laravel -v

Laravel 8

我們來用剛剛新裝的 Laravel Installer 來建立 Laravel 8 專案吧！

因為目前還沒正式 Release, 所以先來裝 dev 版本

暫時先把專案名稱命名為 lv8-dev

laravel new lv8-dev --dev

新版本安裝畫面變得不一樣囉～ 有 Laravel 圖文字樣煥然一新！

再來看一下 Laravel 8 的新呈現畫面 (本範例使用 Valet 開發環境, 若以指令瀏覽結果，請輸入 php artisan serve)

[macOS] Mac 解決 gyp: No Xcode or CLT version detected! 的問題

環境

• macOS Catalina 版本 10.15.6
• Node v14.5.0
• npm v6.14.5

問題

最近換新電腦，在開新專案執行 npm install 時出現下列訊息

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1

解決方法

參考此文：Installation notes for macOS Catalina (v10.15)

sudo rm -rf $(xcode-select -print-path)

執行過程它會重新安裝 command line tools

完成安裝後就行了

參考連結中還有其他指令，但我僅執行這行就成功了，若有朋友也遇到相同問題，可以參考接下來的動作

xcode-select --install

[.NET Core] 如何移除不需要的 .NET Core SDK 版本

前言

開發環境日積月累，安裝了不少 SDK 版本，用不到也很佔空間，於是到了該清理的時候

目前我的機器存在的版本

Environment

• Windows 10

安裝 dotnet-core-unistall 工具

• 下載 msi 檔案: https://github.com/dotnet/cli-lab/releases
• .NET Core Uninstall Tool 文件: https://aka.ms/dotnet-core-uninstall-docs
• DotNet Core Uninstall v1.1.122401

安裝完 .NET Core Uninstall Tool 後，開啟 PowerShell 切換到 C:\Program Files (x86)\dotnet-core-uninstall 目錄

cd "C:\Program Files (x86)\dotnet-core-uninstall"

列出可移除的 dotnet core 版本

.\dotnet-core-uninstall list

有被 Visual Studio 使用的版本也會標記出來，這部分我要保留版本號的資訊

dry-run / whatif

在實際移除前，可用 dry-run 或 whatif 來看一下執行後會移除的版本

.\dotnet-core-uninstall dry-run [option] [VERSION]

.\dotnet-core-uninstall whatif [option] [VERSION]

移除僅特定版本 SDK

移除除了指定版本外的 SDK

把 dry-run 或 whatif 改成 remove 則會真的執行移除動作 (PowerShell 需使用系統管理員身分執行)

因為我要移除掉 Visual Studio 有使用以外的版本所以列出要保留的版本號，並加上 --all-but 的選項

.\dotnet-core-uninstall remove --sdk --all-but 2.1.202 2.1.513 2.1.802 2.2.104

刪除版本之前，也會再詢問是否確定要移除，執行後就會列出一個個被移除的版本

清掉之後僅留下的 SDK 版本

重新釋放掉不少空間

References

• How to remove the .NET Core Runtime and SDK
• .NET Core Uninstall Tool

[PHP] 解決執行 Composer 出現 PHP Fatal error: Allowed memory size exhausted 的問題

問題

今天在執行 composer require 套件安裝時出現 PHP Fatal error: Allowed memory size of xxx bytes exhausted 的錯誤訊息

解決方法

1. 在 php.ini 加大 memory_limit 或是設 memory_limit = -1 (不限制)
2. 使用命令 php -d memory_limit=-1 composer.phar

參考連結

• Composer trouble shooting: memory-limit-errors

[Laravel] 解決 Sqlite 在 migration 退版時發生不支援 dropColumn 或 renameColumn 多重呼叫的問題

問題

在 Laravel 使用 Sqlite 為資料庫使用, 執行 migration rollback 的時候發生下列錯誤訊息：

SQLite doesn't support multiple calls to dropColumn / renameColumn in a single modification.

發生原因

在 migration 的 down() 方法裡使用多個 dropColumn 但 Sqlite 不支援

$table->dropColumn('field1');
$table->dropColumn('field2');

解決方法

用 array() 方式來改寫 dropColumn 即可

$table->dropColumn([
    'field1',
    'field2',
]);

參考連結

• Database: Migrations -- Dropping Columns

[CSS] 列印網頁強制換頁設定

換頁的 CSS 相關設定

page-break-before: auto|always|avoid|left|right|initial|inherit;
page-break-after: auto|always|avoid|left|right|initial|inherit;
page-break-inside: auto|avoid|initial|inherit;

在標籤前或後換頁

@media print {
  /* 在標籤前換頁 */
  h1 { page-break-before: always; }

  /* 在標籤後換頁 */
  footer { page-break-after: always; }
}

避免在文中換頁 page-break-inside: avoid;

@media print {
  /* 避免標籤內換頁 */
  pre, blockquote { page-break-inside: avoid; }
}

References

• https://www.w3schools.com/cssref/prprintpageba.asp

[EF] 使用 SqlFunctions.DatePart 解決 DataTime 日期格式化問題

環境

• Entity Framework 6

問題

在 EF 要處理日期時間的特定格式，不能用 DateTime.ToString() 的方式來處理

例如:

var orders = context.Orders.Where(x =＞ x.OrderDate.ToString("yyyy-MM").Equals("2020-04")).ToList();

執行會出現錯誤

System.NotSupportedException: LINQ to Entities does not recognize the method 'System.String ToString(System.String)' method, and this method cannot be translated into a store expression.

因為 ToString() 是 C# 程式語法, SQL 不認識它是正常的

解決方法

透用 DbFunctions 或 SqlFunctions 來處理日期格式問題

以下是採用 SqlFunctions.DatePart() 來取得我要的日期部分

var orders = db.Orders.Where(x =＞ 
                SqlFunctions.DatePart("year", x.OrderDate) == 2020 
             ＆＆ SqlFunctions.DatePart("month", x.OrderDate) == 4
             ).ToList();

常用的 datepart 參數: year, month, day, week, hour, minute

詳細的 DatePart 可以查詢 SQL 文件: DATEPART

參考連結

• DbFunctions
• SqlFunctions
• SqlFunctions.DatePart Method
• SQL 文件 DATEPART
• Linq Convert DateTime? to DateTime in ("dd/MM/yyyy")
• EF DateTime格式化

[Vue] 如何轉換 jQuery 全域的 click 事件到 Vue 的相對處理方試

前言

採用 jQuery 引用 $(document).click() 的來監聽整份文件的點擊事件

文件內有其他子項目的點擊處理 $('.myButton').click()

那麼以 Vue 的相對處理方式為何? (範例為 Vue 2.x 版本)

監聽事件

在 mounted 加入 document.addEventListener, 事件為 click, callback 為在 Vue 的定義的 onClick 方法

document.addEventListener('click', this.onClick);

在 Vue 的使用如下

new Vue({
  ...
  methods: {
    onClick() {},
    buttonClick() {}
  }
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
  ...
});

注意在 HTML 的 Vue click 事件, 需要加上 .stop (它等同於 event.stopPropagation())

這會防止觸發它以外的事件

<button @click.stop="buttonClick">點我</button>

Vue 的 Event Modifiers 除了常用的 .prevent (等同於 event.preventDefault()) 及上面提及的 .stop 之外

還有 .capture, .self, .once, .passive 等事件修飾符

詳細文件可以參考 Event Handling

參考連結

• Vue.js + Call the click event for whole page document
• Vue.js: Methods 與事件處理 (Event Handling)
• Vue - Event Handling

[TypeScript] 解決 TS2300: Duplicate identifier 'IteratorResult' 錯誤問題

今天在做 VS Code 套件編譯時出現以下錯誤訊息: Duplicate identifier 'IteratorResult'

有 2 個 *.d.ts 檔案定義相沖突

Starting compilation in watch mode...

../../../npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6 - error TS2300: Duplicate identifier 'IteratorResult'.

41 type IteratorResult<t, treturn="any"> = IteratorYieldResult<t> | IteratorReturnResult<treturn>;
        ~~~~~~~~~~~~~~

  node_modules/@types/node/index.d.ts:74:11
    74 interface IteratorResult<t> { }
                 ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.

node_modules/@types/node/index.d.ts:74:11 - error TS2300: Duplicate identifier 'IteratorResult'.

74 interface IteratorResult<t> { }
             ~~~~~~~~~~~~~~

  ../../../npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6
    41 type IteratorResult<t, treturn="any"> = IteratorYieldResult<t> | IteratorReturnResult<treturn>;
            ~~~~~~~~~~~~~~
    'IteratorResult' was also declared here.

Found 2 errors. Watching for file changes.

解決方法

在 tsconfig.json 的 compilerOptions 區塊加上以下設定, 再重新執行編譯

透過直接跳過 Library 的檢查, 因為它不在我程式碼的控制範圍內, 把它排除即可

  "skipLibCheck": true,

[.NET Core] 在本地使用 Try .NET

前言

微軟有個很棒的線上執行 .NET 程式的平台 Try .NET，可以到這裡試玩學習 .NET In-Browser Tutorial

而這個 Try .NET 我們也可以下載在本地端使用唷！自己創建 Sample Code 做為教育訓練用也不錯～

環境

• Windows 10
• .NET Core 3.1

本地使用 Try .NET

安裝文件 Getting started with dotnet try

首先需要 .NET Core 2.1 或 3.0 以上 SDK 版本，才能進行以下步驟

安裝 dotnet-try 全域工具

dotnet tool update -g dotnet-try

 

開始玩 samples

官方提供 3 種方式，本範例採用第一種最簡單的開始方式，直接使用工具的預設範例

先建立一個新的資料夾，切換至此資料夾位置輸入以下指令

dotnet try demo

Try .NET demo project

開啟的專案畫面如下，裡面包含使用說明及教學

常用指令

用來驗證執行的 sample code 是否能正確執行

dotnet try verify

有趣嗎？快載來玩玩吧！

References:

• Try .NET
• Try .NET Samples