前面的话   对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将详细介绍那些不常见的chrome调试工具使用方法 刷新   一般地,人们对于刷新的印象只是停留在使用F5快捷键上.但实际上,刷新包括三种.在开发者调试工具打开的情况下,长按刷新按钮,会出现这三种刷新选项 搜索   在elements标签下使用ctrl+f搜索功能,可以使用css选择器,如'.test

最近项目用上了sass,作为css的预处理器,它可以让我们用程序化的思维书写样式,极大的简化了css的开发,实在是前端居家旅行必备的利器. 我们都知道,在项目中,样式的频繁调试是不可避免的,用上sass虽说coding代码量减少,但调试过程着实让人崩溃. 看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到的未经编译文件的调试信息,而非编译后的,因为

原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过React Developer Tools的基本使用方法,但是由于使用的频率比较高,所以今天就专门整理的一篇文章来仔细介绍React Developer Tools的安装和使用.在React Developer Tools使用过程常遇到的问题及解决办法我们也会介绍. 1,React Developer

前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义   Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式

本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default function bar() { // } foo.js import bar from './bar'; bar(); 通过如下,webpack配置很快实现打包.通过插件我们还可以实现文件压缩,开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试). mo

上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情.今就把这个历险记道给大伙听听,看能从中学习到什么? 一.还原现场 朋友在看到我的惊讶后,分分就把他出错的demo发给了,本地运行,事故现场重现: 二.排查嫌疑对象 既然现象是必现,要么是自己的代码出了问题,要么就是vue有Bug(心里莫名的偷笑,大伙都懂的). 2.1 代码文件结构和源码展示 从代

前言 任何一门语言都有对应的调试方法,也有对应的调试工具,JavaScript当然也不例外.最常用的莫过于浏览器这个调试工具了.而今天我们要讲的对于这个基础调试就不细说,我会将目前所有调试javascript(nodejs)的方法以及工具(主要是VS Code)介绍一下,然后顺便讲解一下webpack的sourcemap功能. 1 前置条件 Chrome: 55+ Nodejs: 6.3+ 我当前使用的Nodejs(7.10)和Chome(Version 59.0.3071.104) 该文章配合

看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到的未经编译文件的调试信息,而非编译后的,因为这样会极大的方便开发人员.就像上面的截图,你能在scss文件下,快速定位到这些代码的位置吗? ~~~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 好在,sass在3.3.0之后版本

基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选

旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sass和less都有提供一个map文件,这个文件是用来干嘛的呢? .map文件是一个json格式的文件,可以直接调试less/sass源文件. ======================================================== 先是less配置(sass配置基本与less一

新发布的Sass 3.3版本,将Source Maps正式纳入了Sass中.这也成为Sass新版本的一大亮点,一大新功能.让广大Sass爱好者可以直接在浏览器中更容易调试自己的代码和Debug相关操作.其实早在2013年七月份Umar Hansa在<Developing With Sass and Chrome DevTools>就详细介绍了如何使用Sass的Source Maps功能帮助大家在浏览器中更好的调试SCSS(或Sass)代码.文中有一张gif的动画演示图,可以一展Source M

较新版本的sass(3.3+)支持source-map功能,可以配合谷歌浏览器或者livestyle来映射查找对应的样式. 要生成source-map可以在grunt中使用 grunt-contrib-sass 插件,只要不在options中配置 ourcemap:'none' 便默认在编译sass时自动生成匹配的.map文件: 下面是说说如何在谷歌中开启映射sass文件的功能,也当作给自己写一个备忘. 首先是在地址栏输入 chrome://flags  进入实验功能配置页面,我们找到 “启用开

在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typescript开发的快乐. 首先打开chrome开发者工具的配置项,然后查看sources下的Enable source maps选项, 如果已经选中,请先取消,然后刷新页面,再选中,再刷新页面. 此时我们可以在开发这工具的Sources选项中看到ts文件. 如果你是使用visual studio开

随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事. 在这个部分,我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具. 注意:如果你是 Web 开发者并且希望获得最新版的 DevTools,你应该使用 Chrome Canary 源面板 源面板允

minify.bat @echo off if ""%1""=="""" goto end :loop if not exist %~dp1\min ( md %~dp1\min ) if ""%1""=="""" goto ok ::set inputlist=--js %~dpnx1 set inputlist=%~dpnx1 set outp

Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对

Google Chrome 在日常生活中扮演的角色不只是一个功能强大的网络浏览器,它内置的 DevTools 同样也是网络开发者进行网络开发的重要工具. DevTools 在不断的进行版本更新,其中有很多重要的更新细节你可能会错过.在这里罗列了 Google Chrome 最值得关注的七大新特性. 开始——Chrome 的 DevTools Experiment Chrome 有一些非常棒的实验性特性,这些特性在默认情况下都是隐藏和禁用的.在浏览器地址栏输入chrome://flags/#ena

网上说的方案各有各的说法,尝试多个才找到有效方案,为避免后来者麻烦,现在讲讲如何调试 笔者ruby版本为3.4.19,因为sass文件的编译是需要ruby环境的,使用sass前需要先安装! 第一步(核心):在sass文件目录下,执行命令如下(笔者图方便,简单命名为a.scss) sass --watch --scss --sourcemap a.scss:a.css 第二步:在Chrome浏览器中点按F12进入开发者工具点击设置按钮 第三步:在设置框中勾选“Enable CSS source m

css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css-preprocessors?hl=zh-CN 在chrome中我们通过sourcemap可以直接调试less源文件文件,这是一个非常强大的功能. 下面由我为大家道来 1.在chrome中开启dev工具,开启容许CSS source maps设置 2.webstorm中只要创建了less扩展名的文件

前言  磨刀不误砍柴工,本篇将介绍如何搭建Chrome插件的ClojureScript开发环境. 具体工具栈:vim(paredit,tslime,vim-clojure-static,vim-fireplace) + leiningen(lein-cljsbuild,lein-doo,lein-ancient) + com.cemerick/piggieback 写得要爽  首先抛开将cljs编译为js.调试.测试和发布等问题,首先第一要务是写得爽-  cljs中最让人心烦的就是括号(),过去