フロントエンドエンジニア入門 初心者向けWeb開発に役に立つgoogle Chrome 拡張機能10選

フロントエンドエンジニア開発の時これあれば開発の効率が上google拡張機能を10選まとめました。

## 1.[Page Ruler Redux](https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal/related?hl=ja&)
マークアップする時何ピックだろう？:thinking:と思った時　`Page Ruler Redux`使えばサイズ図ることができます！便利！!


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/c526274b-b127-576e-56c2-919ee211f724.png)

## 2.[WhatRuns](https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip)
サイトがどういった技術を使って作られているわかる拡張機能です。
最近のトレンドの技術わかるようになるでしょう
![unnamed (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/e4583234-0b4c-dd50-5fd2-88a9ee64541b.jpeg)



## 3.[Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja)
コードを更新する更新されない場合よくありましが、これあればわざわざ行かずワンクリックでキャッシュを消ことができる！

![unnamed (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/1d50fa79-0caa-1e37-0784-f2dbc8f3d347.jpeg)



## 4.[Black Menu for Google](https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja)
Googleサービスに素早くアクセスできるGoogle Chrome拡張機能です。
関数名やクラス名などよく翻訳するのでかなり便利！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/bd182b24-063d-770b-9141-b651a540f486.png)


## 5.[Save to Pocket](https://chrome.google.com/webstore/detail/save-to-pocket/niloccemoadcdkdjlinkgdfekeahmflj)
サムネール付けてブックマークが出来る拡張機能です。
参考になった記事や最近トレンドの記事をこれでブックマークをすればカード形式でブックマークができます。
※googleのidが必要
![unnamed (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/416e250d-c0d8-7e59-6e44-cb1435c47915.jpeg)
![unnamed (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/4032decf-026e-129c-dd56-8767ba10ffe1.jpeg)

## 6.[CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja-jp)
ブロックの属性がすぐわかる拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/84fc3e35-6c23-1109-931b-59154bdb4467.png)

## 7.[WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja)
font-familyとfont-size、line-height、colorの属性がわかる拡張機能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/83104982-9c13-9892-f3bb-0b57c30841ce.png)

## 8.[HTMLエラーチェッカー](https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja)
HTMLのチェックをしてくれる拡張機能です。初心者の方には便利そうな気がします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/2798b280-ca41-f195-0b8c-e84881259d08.png)

## 9.[Emmet Re:view](https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp?hl=ja)
一目でサイズ別の表示がわかる便利な拡張機能です〜効率がアップになりそうですね。:point_up:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/bf3a36cd-af6b-2d6b-61c1-49921b1ac3b1.png)

jsの予測変換までしてくれる実にすごい拡張機能！:smiley:
サイトのスマホやタブレット表示を確認できる拡張機能です。ただ幅を変えるだけでなく、ユーザーエージェントもちゃんと偽装してくれるところがGood！
## 10.[Web Maker](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/related?hl=ja)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/6bf88285-7654-a6c8-a771-bfe0ab087663.png)
たまーに動作確認したいけどプロジェクトまた作らないといけない場合がよくありますがその時これがあればHTMLやCSS、JavaScriptなどのコードの動作を簡単に確認ができて、保存も出来る拡張機能です。
jsのオートコンプリットも出来て素晴らしいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/611034/f72f164a-915c-213a-4d9e-eead804bda09.png)