Help us understand the problem. What is going on with this article?

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

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

1.Page Ruler Redux

マークアップする時何ピックだろう?:thinking:と思った時 Page Ruler Redux使えばサイズ図ることができます!便利!!

image.png

2.WhatRuns

サイトがどういった技術を使って作られているわかる拡張機能です。
最近のトレンドの技術わかるようになるでしょう
unnamed (1).jpg

3.Clear Cache

コードを更新する更新されない場合よくありましが、これあればわざわざ行かずワンクリックでキャッシュを消ことができる!

unnamed (2).jpg

4.Black Menu for Google

Googleサービスに素早くアクセスできるGoogle Chrome拡張機能です。
関数名やクラス名などよく翻訳するのでかなり便利!
image.png

5.Save to Pocket

サムネール付けてブックマークが出来る拡張機能です。
参考になった記事や最近トレンドの記事をこれでブックマークをすればカード形式でブックマークができます。
※googleのidが必要
unnamed (3).jpg
unnamed (4).jpg

6.CSSViewer

ブロックの属性がすぐわかる拡張機能です。
image.png

7.WhatFont

font-familyとfont-size、line-height、colorの属性がわかる拡張機能です。
image.png

8.HTMLエラーチェッカー

HTMLのチェックをしてくれる拡張機能です。初心者の方には便利そうな気がします。
image.png

9.Emmet Re:view

一目でサイズ別の表示がわかる便利な拡張機能です〜効率がアップになりそうですね。:point_up:
image.png

jsの予測変換までしてくれる実にすごい拡張機能!:smiley:
サイトのスマホやタブレット表示を確認できる拡張機能です。ただ幅を変えるだけでなく、ユーザーエージェントもちゃんと偽装してくれるところがGood!

10.Web Maker

image.png
たまーに動作確認したいけどプロジェクトまた作らないといけない場合がよくありますがその時これがあればHTMLやCSS、JavaScriptなどのコードの動作を簡単に確認ができて、保存も出来る拡張機能です。
jsのオートコンプリットも出来て素晴らしいですね。
image.png

whw3312
デザインの専門学校を卒業し、web業界へ新卒とし就職をし、Webデザイナーは約8年経験、現在フロントエンジニアに転向して働いています。
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away