精华内容
下载资源
问答
  • javascript控制台在哪里打开?不清楚你用的是哪种浏览器,一般浏览器请尝试直接点击 F12 键都可以打开。chrome(较新的版本)位置是:设置菜单->更多工具->JavaScript控制台(Ctrl+Shift+J)IE(11版本)位置是:...

    89638082ba6b7a59782b631e5223a2d2.png

    javascript控制台在哪里打开?

    不清楚你用的是哪种浏览器,一般浏览器请尝试直接点击 F12 键都可以打开。

    chrome(较新的版本)位置是:设置菜单->更多工具->JavaScript控制台(Ctrl+Shift+J)

    IE(11版本)位置是:设置菜单 -> F12开发人员工具

    javascript控制台详解

    一、显示信息的命令

    console.log(); //控制台输入 网页中不会输出console.info(); //一般信息

    console.debug(); //除错信息

    console.warn(); //警告提示

    console.error(); //错误提示

    “console.log();” 可以用来取代 “alert();” 或 “document.write();” 比如,在网页中写入 “console.log("Hello World");” 然后会在控制台输入,但是网页中并不会输入。

    f46ae05698ba690cd167b4609ca6a43d.png

    e187b60c2a7c4c068f1d65901caaa7ae.png

    我们在代码中插入如下代码:console.info( "这是info" );

    console.debug( "这是debug" );

    console.warn( "这是warn" );

    console.error( "这是error" );

    加载后打开控制台会看到像下面这样:

    ec64ef668f0f97331cc756dc79cb4726.png

    二、占位符

    console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。比如:console.log( "%d年%d月%d日" , 2011,3,26 );

    console.log( "圆周率是%f" , 3.1415926 );

    068b50b7f901993ef36f04149d0e5010.png

    %o占位符,可以用来查看一个对象内部情况。比如,有这样一个对象:var dog = {} ;

    dog.name = "大毛";

    dog.color = "黄色";

    然后,对它使用o%占位符:console.log( "%o" , dog );

    b7aadaf293bc23985f873a377e3b223a.png

    三、分组显示console.group(); console.groupEnd(); (这两个方法是成对使用的)

    console.group("第一组信息");

    console.log("第一组第一条");

    console.log("第一组第二条");

    console.groupEnd();

    console.group("第二组信息");

    console.log("第二组第一条");

    console.log("第二组第二条");

    console.groupEnd();

    883de1801dd4e214aa3d303f736b9c4e.png

    四、console.dir();(显示某一个对象的所有属性和方法)

    比如,现在为第二节的dog对象,添加一个bark()方法,然后用 “dir();” 显示出来:dog.bark = function(){ alert( "汪汪汪" ); };

    console.dir( dog );

    b8b25ce0b471b2255ba2aef903a8bee4.png

    五、console.dirxml();(获取某个节点所包含的所有html/xml代码)var table = document.getElementById("table1"); //获取节点

    console.dirxml( table ); //显示节点的所有代码

    0f12a59d154a86afd92899e4cdb678cb.png

    六、console.assert();

    (用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常)var result = 0;

    console.assert( result ); //false

    var year = 2000;

    console.assert( year == 2011 ); //false

    0953608a78ded9e86447d249179bb491.png

    七、console.trace();(用来追踪函数的调用轨迹)/*一个加法函数*/

    function add( a,b ){

    return a+b;

    }

    我想知道这个函数是如何被调用的,在其中加入console.trace()方法就可以了:function add( a,b ){

    console.trace();

    return a+b;

    }

    假定这个函数的调用代码如下:var x = add3( 1,1 );

    function add3( a,b ){ return add2(a,b); }

    function add2( a,b ){ return add1( a,b ); }

    function add1( a,b ){ return add( a,b ); }

    运行后,会显示add()的调用轨迹,从上到下依次为add()、add1()、add2()、add3()

    c27e652fc6e50fcc3afe46d093326590.png

    八、console.time();和console.timeEnd();(用来显示代码的运行时间)console.time( "计时器一" );

    for( var i=0;i<1000;i++ ){

    for(var j=0;j<1000;j++){}

    }

    console.timeEnd( "计时器一" );

    fa836112917c70fcd5804bded20e4971.png

    更多web前端开发知识,请查阅 HTML中文网 !!

    展开全文
  • javascript控制台When it fails, JavaScript most often dies with barely a whimper. While this is generally a good thing – a failed script won’t usually blow up your page – it can also make finding ...

    javascript控制台

    When it fails, JavaScript most often dies with barely a whimper. While this is generally a good thing – a failed script won’t usually blow up your page – it can also make finding JavaScript errors a frustrating and time-consuming exercise.

    当它失败时,JavaScript几乎绝不会wh之以鼻。 尽管这通常是一件好事-失败的脚本通常不会使您的页面崩溃,但它也会使查找JavaScript错误成为一件令人沮丧且耗时的工作。

    In the early days of web development, bug tracking was often accomplished by inserting variable values in alert() windows, which would act as primitive indicators of script behaviour. Today, with many more scripts on web pages, we need much more powerful ways to write and test JavaScript. console, originally developed as part of the Firebug browser extension, now has its own API, and is invaluable for web developers at every skill level.

    在Web开发的早期,错误跟踪通常是通过在alert()窗口中插入变量值来完成的,这些变量值可以作为脚本行为的原始指示。 如今,随着网页上更多脚本的出现,我们需要更强大的方法来编写和测试JavaScript。 console最初是作为Firebug浏览器扩展的一部分开发的,现在拥有自己的API,对于每个技能水平的Web开发人员来说都是无价的。

    调出控制台 (Bringing Up The console)

    While every vendor supports it, the console looks slightly different from one browser to the next, and is reached in a slightly different way in each:

    尽管每个供应商都支持它,但控制台在一个浏览器和另一个浏览器之间看起来略有不同,并且在每个浏览器中的访问方式都略有不同:

    • In Chrome: ⌘-Option-J

      在Chrome中: ⌘-Option-J

    • In Firefox: ⌘-Shift-J

      在Firefox中: ⌘-Shift-J

    • In Safari: Ensure that the Developer Menu option is on in Advanced Preferences; use ⌘-Option-C to bring up the console.

      在Safari中:确保“ 高级偏好设置”中的“ 开发人员菜单”选项处于打开状态; 使用⌘-Option-C打开控制台。

    零件便签本,零件报告卡 (Part Scratchpad, Part Report Card)

    The console fulfills many tasks. It is, among other things:

    控制台执行许多任务。 除其他外,它是:

    • An area for JavaScript to report errors

      JavaScript报告错误的区域
    • A “scratchpad” area to test code before implementation

      在实现之前测试代码的“便签本”区域
    • A place for page scripts to output status and tracking information

      页面脚本输出状态和跟踪信息的地方

    I’ll discuss many more possible uses for console in future articles; for now, let’s take a quick look at the simplest of these features.

    在以后的文章中,我将讨论console更多可能用途。 现在,让我们快速看一下这些功能中最简单的功能。

    Start up a console, load a basic valid HTML page, and type the following into the console window:

    启动控制台,加载基本的有效HTML页面,然后在控制台窗口中键入以下内容:

    document.body

    Note that the console returns to you the body element, including all of its markup and text. An empty document would return:

    请注意,控制台将向您返回body元素,包括其所有标记和文本。 空文档将返回:

    <body></body>

    Now let’s take it a little further:

    现在让我们更进一步:

    document.body.style.backgroundColor = "red";

    Note that this immediately changes the background of the page: you’re using JavaScript to directly write CSS in real time. Neat, huh?

    请注意,这会立即更改页面背景:您正在使用JavaScript实时直接编写CSS 。 整洁吧?

    Screenshot of the Chrome console window

    For extra insight, flip to the Elements view and take a closer look at the <body> element in the DOM after taking this step.

    要获得更多信息,请转到“元素”视图,并在执行此步骤之后仔细查看DOM中的<body>元素。

    Used in this way, the console becomes an excellent tool for playing with and learning JavaScript. Of course, all of this code, and any effect associated with it, disappears as soon as you refresh the page. We’ll look at using the console for working with real scripts on pages next.

    以这种方式使用,控制台成为玩耍和学习JavaScript的绝佳工具。 当然,刷新页面后,所有这些代码以及与之相关的任何效果都会消失。 接下来,我们将在控制台上使用控制台来处理真实脚本。

    错误捕捉 (Error Catching)

    Used as a catchment for errors, the console becomes even more useful. For example, write a script directly on a web page:

    用作错误的收集器,控制台变得更加有用。 例如,直接在网页上编写脚本:

    artists = ["Daft Punk","DJ Shadow","Amon Tobin"];
    artists.push("Front Line Assembly");
    console.log("The artists array contains " + artists.length + " elements");

    Load the page, and switch to the console window. With console.log() you can “echo out” any variable, or the result of any action.

    加载页面,然后切换到控制台窗口。 使用console.log()您可以“回显”任何变量或任何操作的结果。

    You can use the console for a lot more than these simple tasks, but I hope this will provide a good start for beginners.

    除了这些简单的任务,您还可以使用控制台进行更多操作,但是我希望这将为初学者提供一个良好的开端。

    翻译自: https://thenewcode.com/767/Introducing-the-JavaScript-console

    javascript控制台

    展开全文
  • JS_控制台 使用HTML,CSS和JSJavaScript控制台
  • javascript控制台 当我们开发项目时,JavaScript中的控制台对象是基础。 !️你可以去我的Github 查找JavaScript示例。 !️ 如果我们控制台标记中键入Google Chrome开发者工具,则单词: console 可以看到...

    javascript控制台

    当我们开发项目时,JavaScript中的控制台对象是基础。

    !️你可以去我的Github 查找JavaScript示例。 !️

    如果我们在控制台标记中键入Google Chrome开发者工具,则单词: console 可以看到这是一个位于全局窗口对象内部的对象:

    因此,您可以从窗口对象访问控制台对象。

    window.console

    但是没有必要 👓

    让我们进一步了解她:

    在控制台中打印:🔈

     // Printing text
    console.log('Hi!');
     // Printing a variable
    const PI = Math.PI;
    console.log(PI);
    // Expresions
    console.log(2 + 4);
    console.log(`PI value: ${PI}`);
    // Comparing
    console.log(null === undefined);
    console.log(3 > 2);
    console.log(typeof NaN);
    console.log(true || false);
    console.log(true && false);
    // Ternary Operator
    console.log( (3 > 2) ? 'Three!' : 'Two!');

    结果: 📍

    打印错误:❌

    console.error('Error!');

    结果: 📍

    打印警告消息:⚠️

    console.warn('Be careful')

    检查对象:🔦

    console.dir(document);
    console.dir({a: 5});

    结果: 📍

    断言:⛳

    function isEqual(x, y) {
    console.assert(
    x === y, { "message": "x is not equal than y",
    "x": x,
    "y": y });
    }
    isEqual(10, 5);

    清除:⬜️

    console.clear();

    结果:控制台将为空。 📍

    表输出:📋

    const users = [
    {name: 'Nick', age: 33},
    {name: 'Jessica', age: 23}
    ];
    console.table(users);

    结果: 📍

    时间: 〽️

    const users = [10, 20, 30];
    console.time('performance');
    const gThan10 = users.filter(n => n > 10);
    console.log(gThan10);
    console.timeEnd('performance');

    结果: 📍

    组:📦

    console.group('numbers');
    console.log(1);
    console.log(2);
    console.log(3);
    console.groupEnd('numbers');

    谢谢😊!

    翻译自: https://hackernoon.com/discovering-the-console-in-javascript-8c5ff77ee846

    javascript控制台

    展开全文
  • javascript控制台by Shakeel Mohamed Shakeel Mohamed着 如何使您JavaScript控制台静音 (How to silence your JavaScript console) Here’s a helpful tip for silencing your browser’s JavaScript console. 这...

    javascript控制台

    by Shakeel Mohamed

    Shakeel Mohamed着

    如何使您JavaScript控制台静音 (How to silence your JavaScript console)

    Here’s a helpful tip for silencing your browser’s JavaScript console.

    这是使浏览器JavaScript控制台静音的有用提示。

    This enables you to unit test with 100% code coverage, while maintaining a clean test output on the console.

    这使您能够以100%的代码覆盖率进行单元测试,同时在控制台上保持干净的测试输出。

    First you need some basic setup code:

    首先,您需要一些基本的设置代码:

    Then, you can write code using mute() and unmute() like so:

    然后,您可以像下面这样使用Mutate()unmute()编写代码:

    This article originally appeared on Coderwall.

    本文最初出现在Coderwall上

    翻译自: https://www.freecodecamp.org/news/how-to-silence-your-javascript-console-8fcdd96997f7/

    javascript控制台

    展开全文
  • javascript控制台The JavaScript console is an invaluable tool to help develop and debug our apps. With the console object and its logging methods, long are the days of of calling alert() to debug and ...
  • js控制台 基于 Web 的 JavaScript 控制台 / REPL
  • Javascript 控制台抽象 - 生产环境中将日志记录保持最低限度 ##用法 目前 jslogger 仅适用于 Web 应用程序。 包含 html 文档中 [removed][removed] 代码中 jslogger.log('I\'m going to become log ...
  • javascript控制台I'm a sucker for consoles. The ability to quickly type some code and see it executed right then and there... priceless. That's why I'm a huge fan of Firebug's JavaScript console. But ...
  • javascript控制台by Riccardo Canella 里卡多·卡内拉(Riccardo Canella) 如何使用JavaScript控制台改善工作流程 (How you can improve your workflow using the JavaScript console) As a web developer, you ...
  • javascript控制台详解

    2020-12-11 01:34:53
    一、显示信息的命令 console.log(); //控制台输入 网页中不会输出 console.info();...” 然后会在控制台输入,但是网页中并不会输入。 我们代码中插入如下代码:  console.info( “这是info” );  
  • node.js 控制台 介绍 ( Introduction ) In this article, we'll learn how to use most methods available in the nodeJS console class more effectively. 本文中,我们将学习如何更有效地使用nodeJS控制台类中...
  • javascript控制台As JavaScript developers, we intuitively use console.log() to debug, print out variables, and log results of our current operations to make sure we are on the right programming path....
  • JavaScript 控制台事件

    2019-09-06 10:38:45
    JavaScript 控制台事件 我们使用浏览器访问网页内容时我们会发现浏览器的控制台中可以任意修改网页内容 治标不治本的方法有: F12 按键事件 鼠标右击事件修改 网页滚动条事件 等等。。。 今天带来一个...
  • 禁用用户JavaScript控制台 那里有几家巨头公司,例如Facebook和Netflix,他们已经决定有效地禁用用户执行JavaScript控制台命令的能力。 Facebook最初的决定是阻止用户执行一组特定的命令,这些命令会通过...
  • #JS控制台 用于需要各种日志记录的 HTML 项目的统一且简单的 Javascript 控制台 灵感来自的编码风格 #用法 // Create a new JSConsole instance var console = new JSConsole ( ) ; // Write some messages ...
  • 简述JS控制台的使用

    2020-10-18 09:01:22
    本文给大家介绍了js控制台的使用,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友参考下吧
  • 主要介绍了禁用JavaScript控制台调试的方法,需要的朋友可以参考下
  • javascript控制台输出

    2019-01-28 08:06:08
    javascript控制台输出,按F12,点击console &lt;script type="text/javascript&gt; console.log("my name is faker"); &lt;/script&gt; 控制台输出结果:my name is faker
  • Javascript控制台相关

    2019-09-05 14:06:59
    Javascript控制台打印Object对象 做项目的时遇到的问题,调试代码时需要打印对象来查看具体数值,可以使用JSON.stringify()将obj转为字符串后打印,或者直接使用console.dir()直接打印。 ...
  • node.js 控制台Introducing colors into the command line makes consolereading much easier which iswhy finding Chalk was a life-changing event for me. I started digging deeper into making the console mo....
  • 符号 JavaScript 控制台输出的颜色符号 (Node / io.js)
  • 远程 js 控制台是一个用 golang 编写的简单微服务,可以收集和显示 javascript 错误或任何其他 js 事件。 您可以通过向 html 页面添加几行代码来记录 javascript 错误或任何其他消息。 服务器端,一个简单的收集器...
  • javascript 控制台报错

    2016-11-22 06:37:17
    ![图片说明](https://img-ask.csdn.net/upload/201611/22/1479795886_421539.png) ![图片说明](https://img-ask.csdn.net/upload/201611/22/1479795903_648130.png)
  • js 这是我尝试使用JS实现JS控制台的尝试。 工作正在进行中...
  • 禁用JavaScript控制台调试

    千次阅读 2014-03-07 15:42:41
    原文链接: Disable the User’s JavaScript Console 原文日期: 2014年03月06日 翻译日期: 2014年03月07日 翻译人员: 铁锚 ...最初这是 由Facebook开始的 ,用于防止恶意用户通过JavaScript控制台

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 200,719
精华内容 80,287
关键字:

js控制台在哪里