console.log() в стиле css, приходите и учитесь

Байду внешний интерфейс Поиск работы CSS

Когда мне скучно, я люблю открывать какие-нибудь скучные веб-страницы и играть с хромированной папиной консолью.

Нормальная операция

  • В процессе разработки интерфейсных страниц необходимо открыть консоль, распечатать определенные вещи и посмотреть, что получится на выходе;
  • Ударьте точку останова, пусть код летит немного медленнее, шаг за шагом... вглубь... введите...;
  • Взгляните на загруженные ресурсы сети, статические ресурсы, параметры и заголовки запросов.Если это практично, воспользуйтесь тенденцией, чтобы смоделировать ее и сделать небольшую вещь;
  • Найдите странный элемент dom и посмотрите, как выглядит стиль css;
  • Некоторые аудио страницы нужно заряжать? Не паникуйте, если вы можете прослушать на странице, откройте консоль и выполните глобальный поиск

Однако в напряженном процессе разработки, где так неторопливо, чаще всего используются:

console.log("变量a初始值:",a);
xxxxx；
对a的某些赋值；
xxxxx；
console.log("变量a变化后的值:",a);

или:

 $.ajax({
            url:"/xxx",
            type:"post",
            data:{ start:0},
            dataType:"json",
            success:function (data) {
                //先抱着试一试的态度对比下后端返回的数据及格式与接口文档
               console.log(data);
            }
        })

Или... штатная работа, тут особо нечего сказать

изменить позу

Вы, должно быть, открыли домашнюю страницу Baidu и нажали F12. Если это так, вы должны пониматьБайдуОни также будут желать ваших талантов, ведь большинство людей, которые часто открывают консоль, — программисты.

Какой процесс должна пройти веб-страница, чтобы попасть к пользователю? Какой рост должен испытать новичок, чтобы стоять на вершине технологий? исследовать секреты здесь; испытать проблемы здесь; будь здесь хозяином; Присоединяйтесь к Baidu, присоединяйтесь к веб-поиску, вы можете влиять на мир.

微信图片_20180426151248.png

посмотри сноваЗнай почти

微信图片_20180426152040.png

так же какДиди

Привет, брат программист, ты рад снова видеть эту пасхалку? Я знаю, что в данный момент вы хотите пожаловаться и хотите атаковать наш официальный сайт; Что еще более важно, вы хотите оптимизировать, вы хотите изменить сайт или даже весь Didi. Вы нашли для себя подходящую отправную точку? Через эту дверь мы можем изменить Диди, изменить мир и изменить себя. Open Sesame: отправьте свое резюме на hr@diditaxi.com.cn (пожалуйста, назовите тему письма «Имя-Подать заявку на позицию XX-из консоли») Этап, на котором вы создаете мир: http://job.didichuxing.com/

微信图片_20180426151505.png

console.log("Вы можете печатать подобные сообщения?")

Их консоли слишком высоки, моя консольная информация отличается, моя осанка правильная!

微信图片_20180426153258.png

Ну, поза довольно хороша, не так ли? Будучи забавным, я узнал несколько полезных способов использования консоли:

1. __console.warn("网络不稳定")__ -----打印一个警告信息;
2. __console.error("网络错误")__     -----打印一条错误信息;
3. __console.group('嘲讽(💩)')__ -----打印树状结构，配合groupCollapsed以及groupEnd方法;
4.__console.groupEnd()__-----结束当前Tree;
5.__console.table(Arr)__------将数据打印成表格;

    var Arr = [
    ["aa","bb","cc"],
    ["dd","ee","ff"],
    ["gg","hh","ii"],
]

console.table(Arr);
  1. Подстановка значения переменной для console.log()
console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415);
//输出：圆周率整数部分：3，带上小数是：3.1415

7.console.assert(false, "Кажется, мы где-то встречались")-----判断第一个参数是否为真，false的话抛出异常并且在控制台输出相应信息。 8.настройки стиля css для console.log()Сначала посмотрите на код:

console.log("%c3"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:6em;line-height:60px;")

console.log("%c2"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:4em;line-height:60px;")

console.log("%c1"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:2em;line-height:60px;")

console.log('%c南京热还是东京热.', 'color: #fff; background: #f40; font-size: 24px;border-radius:0 15px 15px 0;padding:10px;');

console.log("%c                                           ","background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;width:1px;height:40px;padding:2px;")

console.log("%c  热 热 热", "color:red;font-size:30px;font-weight:bolder;padding:50px 420px;line-height:10px;background:url('http://img.zcool.cn/community/0127c0577e00620000012e7e12da0e.gif') repeat-x;background-size:contain;");

Общий смысл в том, что первый параметр — это «%c» + печатное содержимое, а второй параметр — стиль css.Легко ли сменить позицию? Поспешите разместить на своем сайте качественную печатную информацию, когда другие украдут код, они съедят кучу денег! Техническую документацию брать не буду, хочу углубиться... в... исследования, зайти... зайти... посмотретьMDN

Категории