Chrome即时显示代码效果

写代码不像写博客，一边写就能一边看到效果，而且代码的容错率极低，哪怕只错了一个字母，整段甚至整篇就有可能全都无法正确运行。正常情况下，程序员们写完代码以后需要通过编译、生成等步骤才能看到效果。在Code Editor中，这个常规被打破了，因此它可以帮助程序员即时显示代码效果。

在Chrome浏览器中打开Chrome Experiments，并在搜索框中输入“Code Editor”即可找到这个网页应用。



搜索Code Editor应用

点击Launch Experiment进入Code Editor，可以看到一段示例代码，以及这段代码所实现的效果：一个滚动的多边球体。



即时预览代码效果

代码是可以编辑的，比如我们调整其中的一个参数，就可以将球形变大或缩小，即时生效。



即时预览修改后的代码效果

利用这个工具，程序员们在编写代码时就能提高不少效率了。

Chrome Experiments中目前已经有500多个实例了，而且Google还在不断为其增加更多应用，并鼓励开发者提交他们的JavaScript应用程序，供大家使用和交流。

赞 (0)

相关推荐

  • win7任务栏chrome图标显示异常

    今天我遇到一个win7任务栏chrome图标显示异常的问题现与大家分享下处理办法： 关闭chrome，并解锁任务栏图标 将下列内容保存成 xxx.bat文件 taskkill /im explorer ...

  • axure怎么设计菜单横向隐藏与显示的效果?

    最近有若干个伙伴找我咨询axure的用法,让我这颗凉了许久的心又再次感受到一点温度,也忽然意识到,凡事坚持不懈的做下去,总会有收获的,所以,本人近期将持续更新一些常用的小技巧,以便广大还在摸索axur ...

  • chrome怎么显示书签栏？chrome显示书签栏教程

    我们可以把自己经常打开的网址添加到书签中,如果想要快速打开这些网址,可以让Chrome浏览器主界面显示书签栏,下面我们就来看看怎么样让Chrome浏览器显示书签栏吧. chrome显示书签栏教程 方法 ...

  • Android Studio怎么设置才能显示代码行数?

    Android Studio如何设置显示代码行数?下面介绍的是Android Studio设置显示代码行数的操作步骤. 1.首先打开Android Studio开发工具. 2.File——Settin ...

  • 在win10电脑中进行多桌面切换时不显示动画效果怎么办

    在win10电脑中进行多桌面切换时不显示动画效果怎么办

    今天给大家介绍一下在win10电脑中进行多桌面切换时不显示动画效果的具体解决方法.1. 首先打开电脑,找到桌面上的此电脑图标,右键,在打开的菜单中,选择属性选项,在打开的页面,点击左侧的高级系统设置选 ...

  • 如何让 Visual Studio 编译环境显示代码行号

    VS(Visual Studio)编译环境中,默认是不显示代码行号的,但这并不代表了VS编译环境不提供这样的功能.本文主要描述了如何让VS编译环境显示代码行号的方法. 操作方法 01 打开VS编译环境 ...

  • Android Studio教程：显示代码行数设置步骤

    Android Studio如何设置显示代码行数?下面介绍的是Android Studio设置显示代码行数的操作步骤. 操作方法 01 首先打开Android Studio开发工具. 02 File- ...

  • 华为mate9por设置灭屏显示没效果怎么办

    有些人手机设置灭屏显示没效果,又不知道该怎么办,那么小编今天就在这里给大家分享一点我的小,希望 操作方法 01 首先如果手机设置灭屏显示没效果,那么可能是我们没有设置好,则需要重新设置一次.我们打开手 ...

  • eclipse怎么显示代码行数

    熟悉java开发的朋友们肯定有这样的,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数 方法1 01 ...