经常需要做一些前端代码的实验, 这时候我往往会用JSFiddle或CodePen.

最近用CodePen更多一些, 里面提供的选项更加丰富, 提供了各种各样的HTML/Javascript/CSS Preprocessor, 对移动端的支持也更好. 更重要的是, 我觉得, CodePen更酷一些, 里面能够看到各种别人做的酷炫Demo.

CodePen的自动刷新机制也是很好用的, 特别有利于修改HTML和CSS, 能够动态地看到修改后的效果. 不过这个特性在编写js的时候有时候会坑爹: 因为代码还没写完就运行了, 如果出现死循环什么的, 浏览器就卡死了.

发现了两种方法可以避免未编写完的JS文件自动刷新导致的卡死:

  1. 在URL后面加上?turn_off_js=true.
  2. Settings > Behavior > Want a Run Button? > 取消勾选"AUTO UPDATE PREVIEW".

参考:

  1. Turn Off JavaScript in Previews
  2. Auto Run in JavaScript now Optional

CodePen避免自动刷新导致的JS卡死的更多相关文章

  1. PHP 页面自动刷新可借助JS来实现，简单示例如下：

    <?php  echo "系统当前时间戳为:"; echo ""; echo time(); //<!--JS 页面自动刷新 --> echo ...

  2. cssrefresh.js-CSS文件自动刷新

    一.如何使用cssrefresh.js 使用很简单,类似下面的代码: <head> <link rel="stylesheet" type="text/ ...

  3. 高并发分布式系统中生成全局唯一（订单号）Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  4. js设置自动刷新

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  5. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  6. gulp最佳实践（包含js,css,html预编译，合并，压缩,浏览器自动刷新）

    gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name" ...

  7. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  8. js返回上一页并刷新、返回上一页、自动刷新页面

    一.返回上一页并刷新 <a href="javascript:" onclick="self.location=document.referrer;"&g ...

  9. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

随机推荐

  1. [转]内嵌页面iframe以及和其兄弟iframe的相互传值

    原文出处 iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主 ...

  2. php-fpm 的安装与LNMP测试

    1. 下载并安装PHP 1.1 编译安装 1.1.1 安装前的准备 下载并安装libmcrypt 和 libmcrypt-devel[root@test /opt/soft]# wget ftp:// ...

  3. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  4. jdbc-connect-oracle12c-pdb/cdb(jdbc连接oracle12c的pdb和cdb)

      1       本文简介: 通过特意引发问题,聚焦问题,解决问题,并循序渐进 最后总结jdbc连接oracle12c中cdb和pdb的条件. 软件环境:Redhat7.1+orcacle12c 2 ...

  5. 【笔记】mongodb启动不了：child process failed, exited with error number 100

    今天在启动mongodb的时候,发现起不来,报错:child process failed, exited with error number 100然后先去/var/log/mongo/mongod ...

  6. http 请求头

    HTTP Request的Header信息 1.HTTP请求方式 如下表: GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并 ...

  7. 01_JavaMail_01_邮件服务器简述

    [收发邮件简单流程] 过程大致是: 发邮件时从客户端发邮件发送到邮件服务器,收邮件就是把邮件服务器的邮件下载到客户端. [邮件协议] * SMTP:(Simple Mail Transfer Prot ...

  8. C++模板学习随笔

    本文学习内容参考:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html C++模板 1.模板分为函数模板和类模板两种类型 函数模板针 ...

  9. 'DEVENV' is not recognized as an internal or external command,

    使用命令行 DEVENV 编译c# 工程, C:\MyProject>DEVENV "MyProject.sln" /build Release /useenv'DEVENV ...

  10. ng表单验证，提交以后才显示错误

    只在提交表单后显示错误信息 有时候不想在用户正在输入的时候显示错误信息. 当前错误信息会在用户输入表单时立即显示. 由于Angular很棒的数据绑定特性,这是可以发生的. 因为所有的事务都可以在一瞬间 ...