大家好，如果您还对webstorm谷歌浏览器不太了解，没有关系，今天就由本站为大家分享webstorm谷歌浏览器的知识，包括谷歌浏览器 webcomponents的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

本文目录

1. Chrome浏览器插件JetBrains IDE Support怎么使用
2. webstorm 怎么改变浏览器
3. WebStorm的页面怎样在浏览器中预览效果
4. 如何用html5构建移动端的webapp
5. webstorm如何添加预览浏览器
6. webstore如何同步idea的插件

一、Chrome浏览器插件JetBrains IDE Support怎么使用

1.JetBrains IDE Support扩展安装成功后，在浏览器的右上方可以看到JB的logo，但是因为没有和服务器连接，所以标志是灰色的。用户在使用的过程中，只有确认地址栏右边的JB插件图标是亮的，才表示chrome和webstrom是连接着。如下图所示：

2.Chrome的JetBrains IDE Support扩展可以连接到用户指定的Web服务器，JetBrains IDE Support扩展的属性中可以修改Web服务器地址和端口。

3.用户在webstrom中作出的任何修改（主要是HTML主文件），会立刻在浏览器中体验出来，如下图所示：

二、webstorm 怎么改变浏览器

1、1：File>Setting>tools>web browsers如图所示：

2、2：可以看到webstrom原生的有默认的几个浏览器。如果安装了也可以直接在运行界面的右上角直接点击，或者按alt+f2出现选择框再点击。

3、3：在File>Setting>tools>web browsers这个界面可以看到在path路径这里点击左键出现如图，输入自己想要的浏览器的运行文件的路径就可以了。最后不要忘了点击OK结束设置。

三、WebStorm的页面怎样在浏览器中预览效果

1、首先，我们打开自己的WebStrom软件，打开项目，找到任意一个.html的文件。

2、我们选中某个html文件，然后右击，在弹出的菜单中有一项是“run***.html”，

3、点击之后，我们电脑上默认的浏览器就会自动打开这个页面，并且该页面有配置好的服务器。

4、刚才提示“run***.html”的文字后面括号内有（Ctrl+Shift+F10），这个是快捷键，我们可以在选中html文件后，同时按住键盘上的这三个键来在浏览器中打开页面。

5、以上都是没有编辑html文件，只是在目录中时的操作，当我们在WebStorm中打开了html文件后，还有另一种快捷操作方式。

6、WebStorm软件的右上角有一个显示当前文件名称的部分，后面紧挨着的一个绿色三角形，点击绿色三角就可以在浏览器中显示页面，或者按下提示的Shift+F10快捷键。

7、还有一个更直观的方法，我们将鼠标悬停到文件编辑区域的右上角，会浮现出几个主流浏览器的图标，有些我们电脑上并没有安装，只要随意点击电脑上已经安装的浏览器，就会在相应的浏览器中展现相应的html页面。

四、如何用html5构建移动端的webapp

移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。

1.Trident(IE浏览器):因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。

2.Gecko:( FireFox)优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。

3.Webkit:( Chrome/ Safari/ UC)优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

4.Presto:(欧朋) Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，基于Webkit内核，可使用Chrome浏览器调试即可。

浏览器已经逐渐从传统桌面转向手机端，竞争也越来越激烈。目前国内市场主流的手机浏览器：UC、百度、欧朋、QQ、海豚、safari、Chrome，这些浏览器都是基于webkit内核的，兼容性方面不存在问题，同时对html5和css3的支持很好，所以，大胆地应用html5和css3技术吧。

在开始编写webapp时，前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

手机分辨率比PC分辨率要庞杂得多，各种分辨率有木有？大小差距那么大有木有？这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素，必须有充分的考虑。考虑到浏览器自适应，需要设计和制作完成各种不同的方法。

1)市场上主流手机生产商的产品分辨率。经过调研发现，目前主流的手机分辨率为：480*800像素、320*480像素，而1280*720像素（720P）会是接下来的趋势。这些都是很粗略的统计，要有精确的数据需要花费不少的精力，那是数据分析人员的工作。

2)项目目标群所持设备的分辨率。项目目标群即用户，用户拥有什么样的手机分辨率，从一定程度上来说比第一点来得更加重要，它决定着项目开发的方向。

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

响应式web开发不是一项开创性的技术变革，简单地说，响应式web设计采用了媒体查询、流式布局、液态图片三项技术，把它们组合在一起来制作页面，使得页面不只在传统桌面，在平板电脑和手机上，各种不同的分辨率都能够完美显示。而要做到这点，我觉得不难，请继续往下：

a)插件安装：window resize。您可以通过下载安装谷歌浏览器插件，安装成功后，当您调整浏览器窗口时，在浏览器右下角会有灰度提示当前窗口和类似于手机视图的大小提示。

b)编辑器安装：Hbulder或Webstorm

c)弄清视图和屏幕的区别。视图是浏览器的内容显示区域，屏幕是设备的物理显示区域。比如视图宽度我们一般用width表示，而屏幕宽度是用device-width来表示。相信做过手机页面的童鞋都经常见过这段代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其中width=device-width就是说把页面宽度设置成和屏幕宽度一样。

d)响应式设计创意网站收集。这里有很多响应式Web设计的网站，供您参考和学习。

为了减少http请求，我想在css样式表里进行媒体查询会是个不错的选择，而不是在页面head部分使用link进行加载。样式表里的媒体查询格式为：

@media screen and(max-width:960px){}

大括号内部书写样式。该语句相当于判断语句，有两个条件，一个是视口宽度最大不超过960px，screen代表显示屏，这两个条件都具备了，就调用大括号内的样式。

流式布局以百分比进行布局。最重要是时刻关注元素的父级层，所有的元素都是以父级层为基准。流式布局的应用是为了和媒体查询完美地结合，形成平滑的布局变化跳转效果。一般而言，media里的样式多以width、padding、margin、font-size、line-height这些为主。

要实现液态图片，只需加入如下代码：img{max-width:100%;}

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>

这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

<meta content="yes” name=" apple-mobile-web-app-capable"/>

meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

<meta content="black" name=" apple-mobile-web-app-status-bar-style"/>

meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

<meta content="telephone=no" name="format-detection"/>

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

五、webstorm如何添加预览浏览器

1、 1：File>Setting>tools>web browsers如图所示：

2、2：可以看到webstrom原生的有默认的几个浏览器。如果安装了也可以直接在运行界面的右上角直接点击，或者按alt+f2出现选择框再点击。

3、3：在File>Setting>tools>web browsers这个界面可以看到在path路径这里点击左键出现如图，输入自己想要的浏览器的运行文件的路径就可以了。最后不要忘了点击OK结束设置。

六、webstore如何同步idea的插件

1. webstorm一般是自带插件 live edit的，不用下载

2. chrome浏览器下载插件 JetBrains IDE Support

3. webstorm的设置中对 live edit进行自定义设置

如图1，随自己的需要修改即可，解释：(1) 3ms网页更新会很快(2)最后一个必须打勾，才能真正使用浏览器的JB插件

4.上面几步完成之后只需要 debug(不是run)(如图2)就可以实现网页同步编辑了（浏览器上面的这一行(如图3)不要点取消，否则就不能同步了）

其他：端口号可自定义设置如图4，5，6

有关JetBrains IDE Support：是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。是一款web开发人员常用的开发者插件，程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用，比如JetBrains公司发布的一个web开发IDE，webstorm！支持代码提示、补全、定位、与Git集成等等各种功能，已经跟传统强类型语言的开发环境感觉无多大差异！

参考链接：

OK，本文到此结束，希望对大家有所帮助。