Chrome Pointer

2024年5月7日 星期二

執行(session not created: DevToolsActivePort file doesn't exist) (The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)解法

當執行selenium遇見以下錯誤時~

 (session not created: DevToolsActivePort file doesn't exist) (The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)


1. 有可能你的chromedriver版本不對

可以去以下網址 或 自行去其他網址找尋相對應的chromedriver

https://getwebdriver.com/chromedriver#stable


2.權限全打開 就可以解決了~~

options = webdriver.ChromeOptions()
options.add_argument("--headless")
options.add_argument("--disable-gpu")
options.add_argument("--no-sandbox")
options.add_argument("--disable-dev-shm-usage")


我是參考這篇才找到解法的qq

https://ithelp.ithome.com.tw/m/articles/10342034

2023年12月29日 星期五

SCSS, SASS的使用和Webpack結合教學

  參考文章

💓[week 13] 前端工具之二 - CSS 預處理器、Babel

💓[week 13] 前端工具之三 - gulp、webpack


👄SCSS

如果想要查看完整的檔案內容,可以將該提交中的檔案名稱指定給 git show 命令。

在此情況下,檔案名稱是 public/index.html。

步驟 1: 安裝 SCSS 編譯器

npm install sass


步驟 2: 撰寫 SCSS 文件


步驟 3: 編譯 SCSS 文件為 CSS

👉一次性編譯:將 input.scss 檔編譯成 output.css

npx sass input.scss output.css


👉watch 模式:每次存檔均會自動進行編譯

sass --style=compressed mais.scss main.css



👉壓縮功能:通常是在開發最後才會執行

sass --style=compressed mais.scss main.css


當使用SASS時,應將文件副檔名更改為.sass,
1. 並且不需要使用大括號 {} 或分號 ;。
2. Sass使用縮進和空白行來區分程式碼區塊。
>> SASS和SCSS幾乎一樣,就差在沒有使用{}和;。

步驟 4: 在 HTML 文件中引入 CSS 文件



👄Webpack

Webpack 是一個非常強大且廣泛使用的前端打包工具,具有許多常用的功能。以下是一些 Webpack 常見的功能和用途:

  1. 模組打包: Webpack 可以將多個前端資源(如 JavaScript、CSS、圖片等)視為模組,並將其打包成較小、更有效的 bundle 檔案,以加速網站載入速度。


  2. 載入器 (Loaders): 載入器允許 Webpack 處理非 JavaScript 檔案。例如,使用 babel-loader 可以將 ES6/ES7 JavaScript 轉換為瀏覽器支持的 JavaScript,使用 sass-loader 可以將 SCSS/Sass 檔案轉換為 CSS。


  3. 插件 (Plugins): Webpack 的插件系統提供了許多功能強大的插件,如 HtmlWebpackPlugin 可以自動生成 HTML 文件,MiniCssExtractPlugin 可以將 CSS 提取成單獨的文件,CleanWebpackPlugin 可以在每次建構前清理輸出目錄等。


  4. 熱模組替換 (Hot Module Replacement, HMR): 在開發模式下,Webpack 提供 HMR 功能,可以實現在應用程式運行時,無需刷新整個頁面,即時更新修改過的模組,加快開發速度。


  5. 代碼分割 (Code Splitting): Webpack 可以將程式碼分割成更小的塊,使得網站在運行時只載入必要的部分,減少初始加載時間。


  6. 靜態資源管理: Webpack 可以處理靜態資源,如圖片、字型等,並將它們優化、壓縮,或將小圖片轉換為 Data URLs。


  7. 多環境配置: 可以根據不同環境(開發、生產等)提供不同的設定,如使用不同的插件、載入器、變數替換等。


  8. 代碼壓縮和優化: 在生產模式下,Webpack 可以壓縮 JavaScript、CSS 和其他資源,並且可以進行樹搬移動、死代碼消除等優化操作。


  9. 擴展性和自定義性: Webpack 可以通過配置文件進行高度定制,以滿足各種特定的項目需求,並支持許多自定義插件和載入器。


👉運行 Webpack 打包:

npx webpack --mode development

npx webpack --mode production

--mode 它是用來指定打包模式的一個選項。Webpack 支援不同的模式,包括 development 和 production。

--mode development:這個選項告訴 Webpack 以開發模式進行打包,生成的 bundle 將保留原始的程式碼結構、不進行壓縮和優化等操作,方便開發者進行調試和開發。

--mode production:這個選項告訴 Webpack 以生產模式進行打包,生成的 bundle 將進行壓縮、優化等操作,以減少檔案大小並提升效能。


👄Webpack 和SCSS同時結合


// webpack.config.js// 

module: {
        rules: [
            {
                test: /\.scss$/, // 匹配 .scss 檔案
                use: [
                    'style-loader', // 將編譯後的 CSS 以 <style> 插入到 HTML 文件中
                    'css-loader', // 解析 CSS 檔案後,將其轉換為 CommonJS 模塊
                    'sass-loader' // 將 SCSS 轉換為 CSS
                ]
            }
        ]
    },



src/index.js
import './styles.scss'; // 引入 SCSS 檔案


.vue檔案若要能夠從灰色變彩色,請加入這個套件extension。
Vue Language Features (Volar)


npm uninstall vue-template-compiler 把vue-template-compiler刪掉 速度變快很多。


"sass": "^1.69.5",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.6.0",
"sass-loader": "^13.3.3",
"style-loader": "^3.3.3",
"vue": "^3.3.13",
"vue-loader": "^16.8.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"


2023年12月25日 星期一

TypeScript的tsconfig.json無法讀取到之解決方法

 參考文章

💓Docker常用指令介紹


Q:為何tsconfig.json沒有自動創建?

在新建 TypeScript 專案時,tsconfig.json 檔案不會自動產生。這個檔案是用來設定 TypeScript 編譯器的設定檔,通常你需要自行建立。


你可以手動創建 tsconfig.json 檔案,並在裡面設定 TypeScript 編譯器的選項,比如指定編譯後的 JavaScript 檔案輸出目錄、選擇使用的 ECMAScript 版本、設定模組系統等等。這樣做有助於自定義和設置你的 TypeScript 專案。


Q:在TypeScript中,為何tsconfig.json沒有辦法讀取到?


{
  "compilerOptions": {
    /* Projects */

    /* Language and Environment */
    "target": "es2016",                 /* 指定生成的 JavaScript 版本為 ES2016,用於定義所產生的 JavaScript 文件中使用的語言特性和相容的庫聲明。 */

    /* Modules */
    "module": "commonjs",               /* 指定生成的模塊代碼,此處為 commonjs。 */

    /* Emit */
    "esModuleInterop": true,             /* 生成額外的 JavaScript 代碼以便支持導入 CommonJS 模塊,這將啟用 'allowSyntheticDefaultImports' 以保證類型相容性。 */
    "forceConsistentCasingInFileNames": true, /* 確保導入時的大小寫一致性。 */

    /* Type Checking */
    "strict": true,                     /* 啟用所有嚴格的類型檢查選項。 */

    /* Completeness */
    "skipLibCheck": true,               /* 跳過對所有 .d.ts 檔案的類型檢查。 */
    "outDir": "dist"                    /* 指定編譯後的 JavaScript 檔案輸出到 'dist' 資料夾。 */
  },
  "include": [
    "src/*.ts"                         /* 包含的 TypeScript 檔案所在的資料夾和檔案匹配模式。 */
  ]
}



在您的 tsconfig.json 中指定了 include 的目錄和檔案模式,應該將這些符合模式的 TypeScript 檔案列入編譯。然而,當您執行 tsc index.ts 時卻出現了找不到檔案的錯誤。

D:\ts>tsc index.ts
error TS6053: File 'index.ts' not found.
  The file is in the program because:
    Root file specified for compilation

Found 1 error.

假設 index.ts 真的存在於 src 目錄下,您可以嘗試以下幾種方法:

1. 使用 tsc 指令:確保終端機的目錄位置位於 D:\ts,然後執行以下指令:

tsc
2.指定 --project 選項:透過指定 --project 選項來告知 TypeScript 編譯器使用哪個 tsconfig.json 檔案。

tsc --project tsconfig.json

這樣做應該可以成功編譯整個專案。


❤Error:
Duplicate function implementation.ts(2393)

在tsconfig.json加上下面這行,並且重新啟動VS code。
本案重啟VS code後才成功把TS的重複選告錯誤解除。
"skipLibCheck": true,               /* 跳過對所有 .d.ts 檔案的類型檢查。 */