Chrome 開發人員工具 console 的一些快速選擇的用法

開發工具一直都是前端人員的求生工具之一，相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具，最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!)，紀錄一下:


(1) $0 選取目前被鎖定的元素
假如你已經在頁面上選擇某個元素了，那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話，就可以直接利用 $($0) (或是 jQuery($0))去操作它。

其實 $( ) 代表的是 document.getElementById，但如果你裝的 library 也有 $( ) 這個 function，就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。

利用選取工具，去選擇你要的 DOM。

直接使用 $0:

而且 chrome 會記錄歷程，假設你選取過四個不同的 element，可以利用 $0, $1, $2, $3，而 $0 是拿最近一次選取的元素，最多，記錄到 $4 這樣。

如果是想要用 CSS 選取元素，可以用 $$()，相當於 document.querySelectAll()。比方說取得所有的 img，可以用 $$(img)。

(2) $x('XPATH') 使用 XPath 選到符合的元素
使用 $x() 這個函示可以直接把 XPath 的值當作 selector，首先你可以在選取的 selector 按下右鍵，複製 XPath，或是你知道規則，也就不需要複製。

接著利用 $x( ) 將 XPath 當作 selector 進行 Query:

(3) $0 拿最近一次計算的值的結果

除了這些還有 clear() 可以清除 console 的內容。
dir({key: value})，dir ( ) 函示可以放入一個 object，會以可以展開的形式呈現。
table(object)，以 table 的形式列出資料，這個功能我超愛，看起來很有新鮮感 :

Firefox 也有哦

若你有興趣知道更多，其實官方文件都有，建議可以去看看 :) 會有挖到寶的感覺

用 google spreadsheets 幫你翻譯文字

最近剛好有個需求要整理專案上的多國語系的名詞，因為多人協作，所以一開始在整理時我自己是採用 google 的 excel 來處理，大致上如下:

但因為要手動翻譯其他語系，打字實在很麻煩，以我來說，大概只有英文是比較知道如何下手的，但日文跟簡體中文呢？一直去找 google translate 也挺麻煩的，還好 google spreadsheets 有現成的函式可以幫我做到，看到這個功能眼淚都要掉出來了，因為當我有上百個字詞要翻譯的時候，根本不可能這麼“人工”，就算透過翻譯出來的英文沒有很準確，但至少我可以只挑我要修改的去修正就行。

Samsung Galaxy S6 edge 使用三個月的心得

這支手機我用了快三個月才寫文，用過才寫得出東西啊.. XD

文章故意寫個開箱圖，因爲我不太會寫文 XD 只好放放照片過過癮。iphone5 我用了兩年多，碰上續約可以剛好換支手機，被店員慫恿後，決定換個 Android 系統玩玩看。定價大約要 26000 其實不比 iphone 便宜，當初買的時候也被身邊朋友噓了好久...

Initializr 初始化專案資料夾結構的快速工具

(此圖截自: http://www.initializr.com/)

Initializr 是一個可以快速把一個前端需要的資料夾跟檔案建立出來的工具，你可以選擇是否是純 HTML5 的 index.html 或者是有用 Bootstrap 的，甚至是一些經常用到的 plugin 他也可以幫你打包起來。

甚至你不用急著下載，可以先點擊 What's Inside 的按鈕，先知道會幫你組好哪些項目，再 Download 也不遲哦～

這個工具在我最近教朋友寫前端的時候是覺得挺方便的 (其實他好像很早就有了...，是我太晚知道)，以前都懶得先在自己的電腦建立這些資料夾 (或是用線上的 jsbin 直接在 browser 上操作)，建完還要慢慢建立 img, css, js 的檔案跟資料夾，真的是麻煩，太多人共同學習的時候又很容易遇到有朋友把資料夾層級建錯的時候，所以如果要要求統一的話，可以考慮看看用這個方便的工具。

其他我常用的教學跟 Demo 工具:
* jsbin.com
* jsfiddle.net
* http://plnkr.co/