2020年11月28日星期六

使用chrome devtools遠程調試android手機

起因

vue起始靜態頁使用cordova打包出來的安卓apk安裝包打開空白（模擬器+真機）且vue.config.js的publicPath已設置''，使用遠程調試看cordova的APP頁面裡面報什麼錯誤。因為在電腦的瀏覽器打開時沒這問題

解法

https://developers.google.com/web/tools/chrome-devtools/remote-debugging Get Started with Remote Debugging Android Devices

第一步、發現你的安卓設備

安卓手機啟用【開發人員選項】
開啟安卓手機上的【開發人員選項】=》【USB偵錯】
打開電腦的chrome
打開網址 chrome://inspect#devices
確保你的【Discover USB devices】是勾選的
安卓手機USB傳輸線連電腦
如果你的設備離線，在安卓手機上同意【允許USB偵錯】

第二步、在你的電腦上調試安卓設備上的內容

打開安卓手機上的chrome瀏覽器（cordova APP、三星網際網路、chrome beta都抓得到）
在你電腦chrome的 chrome://inspect/#devices 分頁，可以看到可用的設備、瀏覽器、分頁
在【Open tab with url】輸入框輸入網址、點擊Open，可以直接在安卓手機的該瀏覽器上新分頁打開該網址
點擊【Inspect】，將會打開新的DevTools實例

直接手機瀏覽器，電腦上的DevTools會同步操作

打開DevTools顯示HTTP/1.1 404 Not Found

原因

https://stackoverflow.com/a/56375871 Google Chrome Developer Tools : Android Debugging returns HTTP/1.1 404 Not Found. Why?

我家的PLDT網路在電腦的chrome無法打開 https://chrome-devtools-frontend.appspot.com/ （DNS_PROBE_FINISHED_NXDOMAIN），換一個讓電腦能打開這網址的網路即可（chrome查件Change IP address換到美國IP、使用手機globe 4G網路）

正常打開如下圖

ps. 我的手機沒換網路不受影響

ps2. 只要遠程調試能成功打開devtools一次後，切回原本網路即使 https://chrome-devtools-frontend.appspot.com/ 打不開，也不會404

其他可能原因（非我遇到的）

電腦和手機瀏覽器版本不同

https://blog.csdn.net/qq_27127385/article/details/103271568 已解决：DevTools 调试移动端弹出 HTTP/1.1 404 Not Found

檢查chrome版本

打開 chrome://version/

ThinkPad：

Google Chrome 87.0.4280.66 (正式版本) (64 位元) (cohort: 87_66_Win)

Samsung J6：

安卓手機的【Google Chrome】和【Chrome Beta】竟然是不同版本，雖然發行者都是Google官方，但是手機的【Chrome Beta】版本才是和電腦chrome版本一樣是 87.0.4280.66

如果要降級電腦版chrome，可能會用到：

https://www.slimjet.com/chrome/google-chrome-old-version.php Google Chrome Older Versions Download (Windows, Linux & Mac)

ps. 因為我即使使用【Chrome Beta】和電腦chrome版本一樣，也無法解決404問題，就沒嘗試降級chrome版本了

Google在你的國家限制了該功能

https://github.com/facebook/stetho/issues/597#issuecomment-395945937 HTTP/1.1 404 Not Found

目前已知伊朗、中國大陸會有此問題，可使用VPN解決

WebView實作設置錯誤

https://stackoverflow.com/a/46220364 Chrome DevTools [chrome://inspect] : 404 Not Found The resource could not be found

安卓手機：設定 =》開發人員選項 =》 WebView實作

沒有選擇 Chrome Stable ，但是android 10 後，chrome不再提供WebView

https://www.xda-developers.com/google-chrome-no-longer-webview-provider-android-10/ Google Chrome app is no longer the WebView provider in Android 10

空白頁可能的原因

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/85 Vue Cordova Blank screen on W10

m0dch3n：使用 https://developers.google.com/web/tools/chrome-devtools/remote-debugging 查看遠程設備chrome裡報什麼錯誤

RaulGF92：使用了@babel/pollyfill一樣有這個問題

m0dch3n： vue.config.js加入

devServer: {

https: false

}

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/78 white blank screen on device emulators and browser: "page not working"

m0dch3n：通常空白頁代表你的javascript沒有啟動vue，通常是因為javascript引擎沒有支持es6或其他新功能，請使用新一點的android系統（7或以上版本），如果還是不能解決，使用chrome devtools遠程調試android手機的cordova webview

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/68 Android shows white screen and nothing more

m0dch3n：你用什麼版本的android？4.4以下變化很大，webview沒有支持所有的javascript功能（如：es6）。你或許需要polyfill或babelify。或使用android 7或8

我的空白頁的原因

net::ERR_FILE_NOT_FOUND ，js的路徑錯誤。重新打包後就可以了

模擬器遠程調試

以Visual Studio 的 Android 模擬器（hyper-v兼容）為例

開啟 5.7" Marshmallow (6.0.0) XHDPI Phone API Level 23 - Similar to Samsung Galaxy Note4...

在chrome的 chrome://inspect/#devices 可以直接抓到該模擬器，模擬器打開內建瀏覽器後，在電腦chrome直接【Inspect】可以打開devtools，但是devtools無法打開瀏覽器畫面，一打開模擬器的瀏覽器就會崩潰不能繼續使用。無需打開模擬器的開發者選項（其實也打不開）

2020年11月24日星期二

目標

把telegram不同貼圖庫的部分貼圖自製成自己的貼圖庫

準備png圖片

把你要的圖傳到自己的Saved Messages

對貼圖右鍵 =》 Save Image As （另存圖片到電腦）

會是 sticker.webp（webp格式）

然後到 https://ezgif.com/webp-to-png 將 sticker.webp 上傳

轉化為png格式

在png圖片上，右鍵另存圖片到電腦

最後再點網頁上面的 WebP to PNG ，繼續處理下一張圖

開始製作

搜尋 @Stickers

點擊對話，然後START 開始（ps. 可把 @Stickers 和 Saved Messages 置頂，方便處理）

傳送指令 /newpack

傳送「想命名的名稱」

傳送「PNG 圖片」（不要壓縮的，Send as a file）

傳送「對應的表情符號」（我隨便選第一個Emoji，可以重複）

（重複傳送「PNG 圖片」=》傳送「對應的表情符號）

傳送指令 /publish

傳送指令 /skip 或上傳封面圖檔（我選/skip）

分享您的貼圖包網址（機器人會回傳給您一個貼圖包的網址，這個網址可以拿去分享給其他人，點擊那個網址就會預覽您的貼圖包。）

完成

參考資料

https://tgtw.cc/post-make-sticker-pack Telegram 製作貼圖包圖文教學

2020年11月17日星期二

下載Discuz

Discuz! 官方站 => （Discuz! 产品动态）Discuz! 官方发布 => （置頂）[发布] DiscuzX 3.4 R20191201

https://www.discuz.net/thread-3847642-1-1.html [发布] DiscuzX 3.4 R20191201

官方 Git 地址：

https://gitee.com/ComsenzDiscuz/DiscuzX

打包文件下载地址：

https://gitee.com/3dming/DiscuzL/attach_files

https://gitee.com/3dming/DiscuzL/attach_files/457751/download Discuz_X3.4_TC_UTF8【20200818】.zip

安裝

解壓縮 Discuz_X3.4_TC_UTF8【20200818】.zip

$ ls

qqqun.png readme/ readme.html upload/ utility/

解析vhost（discuz.example.com）到 upload/ 下

打開 http://discuz.example.com/install/ 即可看到

安裝嚮導

1. 開始安裝

2. 設置運行環境

3. 安裝數據庫

數據庫服務器：192.168.1.7

我的windows 10 上的MySQL 8.0.16，只有root@% 是 mysql_native_password （laravel 6 心得）。如果設localhost或127.0.0.1 會遇到以下錯誤：

( ! ) Warning: mysqli::__construct(): The server requested authentication method unknown to the client [caching_sha2_password] in C:\bear\Discuz_X3.4_TC_UTF8【20200818】\upload\install\include\install_function.php on line 66

Call Stack

# Time Memory Function Location

1 0.0026 518224 {main}( ) ...\index.php:0

2 0.0108 1069952 check_db( ) ...\index.php:270

3 0.0108 1070336 __construct ( ) ...\install_function.php:66

4. 安裝數據庫

安裝完成

前台

打開 http://discuz.example.com/

右上角可直接登錄管理員賬號（admin）

管理中心

http://discuz.example.com/admin.php （第一次登錄後台成果會自動刪除 install/index.php 檔案）

論壇主題管理

（後台管理前台主題）

內容 => 論壇主題管理

二次開發

.gitignore

/.idea/

/data/

/uc_server/data/

/data/ 和 /uc_server/data/ 是緩存目錄，類似laravel的storage/

網上資源

https://www.discuz.net/library/library/ Discuz! 资料库

https://open.dismall.com/?ac=document&page=dev 技术文档_Discuz!开放平台 - Discuz!应用中心

https://www.discuz.net/thread-1625972-1-1.html 二次开发教你识别程序目录和文件列表

修改viewthread視圖

http://discuz.example.com/forum.php?mod=viewthread&tid=1&extra=page%3D1

修改 template/default/forum/viewthread.htm

diff --git a/template/default/forum/viewthread.htm b/template/default/forum/viewthread.htm
index 08ddc59..35829f7 100644
--- a/template/default/forum/viewthread.htm
+++ b/template/default/forum/viewthread.htm
@@ -1,5 +1,5 @@
 <!--{template common/header}-->
-
+hello world
 <script type="text/javascript">var fid = parseInt('$_G[fid]'), tid = parseInt('$_G[tid]');</script>
 <!--{if $modmenu['thread'] || $modmenu['post']}-->
     <script type="text/javascript" src="{$_G['setting']['jspath']}forum_moderate.js?{VERHASH}"></script>

修改首頁視圖

http://discuz.example.com/forum.php

流程

入口文件

forum.php:67

require DISCUZ_ROOT.'./source/module/forum/forum_'.$mod.'.php'; => 決定控制器（？）

控制器（？）

source/module/forum/forum_index.php:436

include template('diy:forum/discuz:'.$gid); => 決定view

view

template/default/forum/discuz.htm

+++ b/template/default/forum/discuz.htm

@@ -1,5 +1,5 @@

+hello discuz

<div id="pt" class="bm cl">

template 緩存

修改subtemplate 引入的模板 template/default/common/header_common.htm 時

template/default/common/header.htm:1

有時候會改了沒反應

解法：

刪除 data/template 下所有 *.tpl.php 檔案

2020年11月16日星期一

安裝指定版本的composer

前言

因為composer 2.0 有時候會遇到問題，所以只打算裝1版本的composer

打開composer下載頁

https://getcomposer.org/download/

獲取 1.10.17 版本的下載連接 https://getcomposer.org/download/1.10.17/composer.phar

安裝

php -r "copy('https://getcomposer.org/download/1.10.17/composer.phar', 'composer-setup.php');"
php -r "if (hash_file('sha256', 'composer-setup.php') === '6fa00eba5103ce6750f94f87af8356e12cc45d5bbb11a140533790cf60725f1c') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

完成

2020年11月12日星期四

PHP的非貪婪模式修飾符和‌‌preg_match_all()

前言

正規式搜尋在第一個符合時終止(Regular expression to stop at first match)

非貪婪模式 - (.*?)

PHP Pattern Modifiers的 U (PCRE_UNGREEDY)

https://www.php.net/manual/en/reference.pcre.pattern.modifiers.php Pattern Modifiers

https://stackoverflow.com/a/37347478 PHP preg_match and preg_match_all functions

找HTML字串tag標籤里的內容：

<b>example: </b><div align=left>this is a test</div>

preg_match_all(

"|<[^>]+>(.*)</[^>]+>|U",

"<b>example: </b><div align=left>this is a test</div>",

$matches

);

‌2 => 會有2個結果

‌‌$matches

‌array (

0 =>

array (

0 => '<b>example: </b>',

1 => '<div align=left>this is a test</div>',

1 =>

array (

0 => 'example: ',

1 => 'this is a test',

)

U - PHP的非貪婪模式修飾符

$matches[1] is an array of strings matched by the first parenthesized sub-pattern

$matches[1] 是第一個帶刮號括號（()）的子模式匹配的陣列 => (.*)

正則用“|”是避免“/”的衝突，或是正則中跳脫“/”

preg_match_all(

"/<[^>]+>(.*)<\/[^>]+>/U",

"<b>example: </b><div align=left>this is a test!</div>",

$matches

);

不使用非貪婪修飾符U

preg_match_all(

"/<[^>]+>(.*?)<\/[^>]+>/",

"<b>example: </b><div align=left>this is a test!</div>",

$matches

);

其他

preg_match_all("/\{([\w\d_]+)\}/", "?new_year={year}&new_month={month}&new_day={day}", $matches)

‌3

‌‌$matches

‌array (

0 =>

array (

0 => '{year}',

1 => '{month}',

2 => '{day}',

1 =>

array (

0 => 'year',

1 => 'month',

2 => 'day',

)

2020年10月28日星期三

laravel 6 Mix前端指南

環境

框架：laravel 6.6

安裝 laravel/ui

$ composer require laravel/ui:^1.0 --dev

如果報錯：

In PackageManifest.php line 122:

Undefined index: name

Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

原因：composer 2.0的問題，把composer 版本回退之前版本

# composer self-update

Updating to version 2.0.2 (stable channel).

Downloading (100%)

Use composer self-update --rollback to return to version 1.8.4

# composer self-update --rollback

Rolling back to version 2019-02-11_10-52-10-1.8.4.

ps. laravel 6必須安裝 laravel/ui:^1.0 --dev 的版本

生成vue基本腳手架

$ php artisan ui vue

Vue scaffolding installed successfully.

Please run "npm install && npm run dev" to compile your fresh scaffolding.

這個操作新增了：

resources/js/components/ExampleComponent.vue

resources/sass/_variables.scss

resources/sass/app.scss

修改了：

package.json

resources/js/app.js

resources/js/bootstrap.js

註冊vue和vue組件

+++ b/resources/js/app.js

+window.Vue = require('vue');

...

+Vue.component('example-component', require('./components/ExampleComponent.vue').default);

...

+const app = new Vue({

+ el: '#app',

+});

$ npm install

$ npm run dev

...

ERROR Failed to compile with 2 errors

error in ./resources/sass/app.scss

Module build failed (from ./node_modules/css-loader/index.js):

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

- options has an unknown property 'outputStyle'. These properties are valid:

object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

at validate (/var/www/html/project-z/coolapp/node_modules/schema-utils/dist/validate.js:98:11)

at Object.loader (/var/www/html/project-z/coolapp/node_modules/sass-loader/dist/index.js:36:28)

at /var/www/html/project-z/coolapp/node_modules/webpack/lib/NormalModule.js:316:20

at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:367:11

at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:233:18

at runSyncOrAsync (/var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:143:3)

at iterateNormalLoaders (/var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:232:2)

at /var/www/html/project-z/coolapp/node_modules/loader-runner/lib/LoaderRunner.js:205:4

at /var/www/html/project-z/coolapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15

at processTicksAndRejections (internal/process/task_queues.js:79:11)

error in ./resources/sass/app.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

- options has an unknown property 'outputStyle'. These properties are valid:

object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

at validate (/var/www/html/project-z/coolapp/node_modules/schema-utils/dist/validate.js:98:11)

at Object.loader (/var/www/html/project-z/coolapp/node_modules/sass-loader/dist/index.js:36:28)

@ ./resources/sass/app.scss 2:14-253

原因：

php artisan ui vue 改了 package.json ，使用了 "sass-loader": "^8.0.0", ，使得下一個操作 npm install 安裝了sass-loader 8.0.0

解法：

移除sass-loader 8.0.0 改裝7.1.0

$ npm uninstall --save-dev sass-loader

$ npm install --save-dev sass-loader@7.1.0

再執行

$ npm run dev

生成登錄/註冊腳手架

$ php artisan ui vue --auth

這個操作新增了：

app/Http/Controllers/HomeController.php

resources/views/auth/login.blade.php

resources/views/auth/passwords/confirm.blade.php

resources/views/auth/passwords/email.blade.php

resources/views/auth/passwords/reset.blade.php

resources/views/auth/register.blade.php

resources/views/auth/verify.blade.php

resources/views/home.blade.php

resources/views/layouts/app.blade.php

修改了：

routes/web.php

登錄頁

http://app.test:5566/login 使用users 表的 email 和password 登錄（passport API也是這個方式登錄的）

歡迎頁

http://app.test:5566/ resources/views/welcome.blade.php:68 上方新增了Login和Register按鈕

編寫Vue 組件

diff --git a/resources/js/components/ExampleComponent.vue b/resources/js/components/ExampleComponent.vue

index 3fb9f9aa..944c6973 100644

--- a/resources/js/components/ExampleComponent.vue

+++ b/resources/js/components/ExampleComponent.vue

@@ -3,7 +3,7 @@

- <div class="card-header">Example Component</div>

+ <div class="card-header">Example Component Bear</div>

I'm an example component.

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php

index 05dfca92..73075388 100644

--- a/resources/views/home.blade.php

+++ b/resources/views/home.blade.php

@@ -1,6 +1,7 @@

@extends('layouts.app')

@section('content')

+<example-component></example-component>

監視和自動重編譯發生變化的組件

在hyper-v 上執行，不要在windows 10 上執行，PHPStorm Deployment 要忽略 node_modules 目錄上傳

$ npm run watch-poll

新增組件後，需要重新編譯 npm run dev ，或重新執行 npm run watch-poll

參考資料

https://learnku.com/docs/laravel/6.x/frontend/5149 前端指南

https://stackoverflow.com/a/61197256 Laravel PackageManifest.php: Undefined index: name

https://stackoverflow.com/a/60513876 Sass Loader Error: Invalid options object that does not match the API schema

https://github.com/JeffreyWay/laravel-mix/issues/2206#issuecomment-527730992 Compatibility with sass-loader 8.0.0

2020年10月21日星期三

使用Wireshark手機（Android+iPhone）抓包，免root

設備：

筆電（Windows 10） + iPhone 手機一隻 + Android 手機一隻

Windows 10

windows 先連上wifi

打開【網路連線】

設定 => 網路和網際網路 => Wi-Fi => 相關設定：更變界面卡選項

打開【行動熱點】

設定 => 網路和網際網路 => 行動熱點 => 開啟

打開【行動熱點】後，【網路連線】裡面會多一個網卡

iPhone 和 Android也連上該windows 10 分享的熱點

Wireshark

選擇剛剛打開【行動熱點】後【網路連線】裡面新增的網卡

iPhone和Android打開瀏覽器，手機訪問 http://www.iplocationfinder.com/

wireshark 過濾器： http && http.host == "www.iplocationfinder.com"

即可看到iPhone（192.168.137.43）和Android（192.168.137.232）訪問 www.iplocationfinder.com 的封包

參考資料：

https://www.itread01.com/p/48468.html 手機抓包的兩種方法：wireshark抓包和fiddler抓包

訂閱：文章 (Atom)

備忘錄

sublime alignment: ctrl+alt+a ( format PHP class const )

GFS、DRBD、Heartbeat

RAID、SSD+mysql index

MFS(Mirror File System)

正規化

wiki data index search

mytop - 观察mysql什麽鬼东西卡住，抓slow query(ex. 3000秒)

PHP魔術方法

apache jmeter

https://www.percona.com/software/mysql-database/percona-server

panabit

nginx - 反向代理、js跨域、替换源站、域名重定向、墙、包新module rpm/deb

PHP - 自动加载类 __autoload()、Namespaces、重载(魔术方法)

MySQL優化

karaf

burp suite community - 滲透

wireshark 篩選器

declaration of should be compatible with

iptraf-ng

galera cluster

keepalived beanstalkd

rollbar

2020年11月28日 星期六

起因

解法

第一步、發現你的安卓設備

第二步、在你的電腦上調試安卓設備上的內容

打開DevTools顯示HTTP/1.1 404 Not Found

原因

其他可能原因（非我遇到的）

電腦和手機瀏覽器版本不同

檢查chrome版本

Google在你的國家限制了該功能

WebView實作設置錯誤

空白頁可能的原因

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/85 Vue Cordova Blank screen on W10

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/78 white blank screen on device emulators and browser: "page not working"

https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/68 Android shows white screen and nothing more

我的空白頁的原因

模擬器遠程調試

2020年11月24日 星期二

目標

準備png圖片

開始製作

參考資料

2020年11月17日 星期二

下載Discuz

官方 Git 地址：

打包文件下载地址：

安裝

解壓縮 Discuz_X3.4_TC_UTF8【20200818】.zip

安裝嚮導

1. 開始安裝

2. 設置運行環境

3. 安裝數據庫

4. 安裝數據庫

安裝完成

前台

管理中心

論壇主題管理

二次開發

.gitignore

網上資源

修改viewthread視圖

修改首頁視圖

流程

入口文件

控制器（？）

view

template 緩存

2020年11月16日 星期一

前言

打開composer下載頁

安裝

2020年11月12日 星期四

前言

PHP Pattern Modifiers的 U (PCRE_UNGREEDY)

正則用“|”是避免“/”的衝突，或是正則中跳脫“/”

不使用非貪婪修飾符U

其他

2020年10月28日 星期三

環境

安裝 laravel/ui

生成vue基本腳手架

原因：

解法：

生成 登錄/註冊 腳手架

登錄頁

歡迎頁

編寫Vue 組件

監視和自動重編譯發生變化的組件

參考資料

2020年10月21日 星期三

設備：

Windows 10

打開【網路連線】

打開【行動熱點】

Wireshark

參考資料：

2020年11月28日星期六

2020年11月24日星期二

2020年11月17日星期二

2020年11月16日星期一

2020年11月12日星期四

2020年10月28日星期三

生成登錄/註冊腳手架

2020年10月21日星期三