Обзор инструмента CodeSite в Delphi
После выхода RAD Studio XE в составе меню “Tools” появился ещё один инструмент для разработчика – CodeSite. Что такое CodeSite? Это система журналирования (logging system), которая позволяет вести удобный и, главное, максимально информативный лог работы приложения. Думаю, что когда-либо перед любым разработчиком встает вопрос о том, каким образом отслеживать работу своего продукта, как на этапе его разработки, так и после релиза, когда программой во всю используют другие люди. Соответственно, до RAD Studio XE, многие могли начать изобретать свой собственный “велосипед” – “движок для логирования” собственного производства. Может быть такой подход и оправдан в какой-то мере, но всё-таки имеет много недостатоков, например:
В принципе, эти два недостатка и сподвигли меня уделить пару часиков своего времени на то, чтобы изучить работу инструмента CodeSite. Так как сейчас приходится успевать работать над двумя проектами, то тратить время на “велосипеды” совсем не хочется, тем более, что под рукой уже есть замечательное и эффективное решение от профессионалов.
Введение
Итак, что же такого интересного может предложить нам CodeSite?
CodeSite дает разработчику более полное понимание того, как выполняется его код. Благодаря имеющимся в составе продукта Viewer’ам, можно получить лог, который позволит с максимальной скоростью и удобством разобраться в том, что происходит в программе. Можно “лёгким движением руки” (с) записать в лог целый объект и получать сведения по изменяющимся свойствам, быстро логировать работу сразу нескольких потоков в приложении, разделять сообщения по группам, свойствам, назначать сообщениям другие свойства (цвета шрифтов и фона), которые будут способствовать более комфортному и эффективному изучению лога. Но об этом чуть позже, а пока пару слов про viewer’ы в CodeSite.
Для просмотра логов мы можем использовать:
Кроме того, в состав CodeSite входит небольшая консольная утилита под названием CSFileExporter.exe, с помощью которой можно экспортировать лог-файл в другие форматы – XML, CSV, TSV.
От слов к делу. Посмотрим как работает CodeSite и, что мы можем сделать, используя бесплатную версию инструмента – CodeSite Express.
Первый лог с CodeSite. Использование класса TCodeSiteLogger.
Класс TCodeSiteLogger используется для отправки сообщений из программы в диспетчер CodeSite для дальнейшего их просмотра в одном из viewer’ов. Собственно, для нас этот класс будет основным. Класс содержится в модуле CodeSiteLogging, который необходимо подключить в uses того модуля работу которого мы будем логировать. Для наиболее общего использования возможностей этого класса от нас не требуется создавать собственные объекты, т.к. при инициализации модуля уже создается объект CodeSite: TCodeSiteLogger, который можно сразу же использовать. Однако никто нам и не запрещает сделать хоть 10 собственных объектов и работать с ними.
Для начала рассмотрим те методы класса, без которых лог – не лог. И первый метод:
Метод Send отправляет новое сообщение в логгер. Этот метод имеет несколько перегруженных вариантов, если быть точнее, то в CodeSite 5 (для Delphi XE2) содержится 39 вариантов метода Send, которые позволяют отправлять различные данные в логгер в их нативном формате. Например, следующий перегруженный метод:
Позволяет отправить сообщение, содержащее целиком весь объект формы. Другие варианты Send позволяют отправлять строки, числа, списки строк, картинки, иконки и т.д. В общем преобразования типов данных внутри кода программы нам вряд ли понадобится.
Для примера работы метода Send создадим новый проект Delphi, подключим в uses модуль CodeSiteLogging, бросим на форму кнопку и напишем на OnClick такой код:
Теперь запустите программу и нажмите кнопку. Сразу же после нажатия кнопки запуститься Live Viewer, содержащий наши сообщения:
Как видите, то сообщение, для которого мы назначили иконку ошибки, выглядит иначе, чем два предыдущих сообщения. И надо сказать, что использование иконок – это конечно, мелочь, но эта мелочь очень неплохо повышает читабельность лога. Ведь согласитесь, что при просмотре лога первое, куда перемещается взгляд – на запись, которая выглядит “не так”? И тут главное не переборщить, чтоб лог не выглядел как новогодняя елка, иначе вся наглядность пойдет прахом.
Двигаемся далее по методам. Следующий метод:
Этот метод проверяет выражение, записанное в Expression и, если оно равно False отправляет в логгер сообщение типа “Ошибка”. На примере нашего приложения работу этого метода можно продемонстрировать так:
Если высота окна будет больше ширины – в лог выведется строка, сообщающая нам об этом, иначе – сообщение об ошибке будет пропущено. Кстати, раз уж речь пошла про сообщения об ошибках и исключениях, то у TCodeSiteLogger для таких целей есть сразу два метода:
Эти методы по части количества перегруженных версий не такие богатые как Send (всего по две версии), но зато сразу отправляют сообщение с необходимыми иконками. Перегруженные версии позволяют использовать в сообщениях шаблоны строк (аналогично CreateFmt у Exception). Сообщения, отправленные с помощью методов SendError и SendExceprion в Live Viewer выглядят следующим образом:
Следующие два метода позволяют нам записать в лог вход/выход из метода:
Использовать их можно так:
В этом случае мы получим вот такой лог работы программы:
Либо воспользоваться перегруженными версиями этих методов и передать в сообщении какой-нибудь объект:
В этом случае перед названием метода, которое мы передали во втором параметре также выведется и название объекта, т.е. лог будет выглядеть так:
Использование двух этих методов могут преследовать сразу две полезные задачи. Во-первых, использование Enter/ExitMethod повышает наглядность лога – в большом подробном логе сразу будет видно в каком методе что происходит. Во-вторых, используя функции viewer’а мы можем сворачивать все сообщения, находящиеся между блоками и, тем самым, быстро находить необходимую нам информацию в логе.
Вот, пожалуй, те методы, которые будут очень полезны и востребованы при логгировании работы программы. Это не все методы, которые имеются у класса TCodeSiteLogger. Есть так же и менее важные методы, например,
которые ещё больше повышают наглядность лога, но, не передают никакой информации о работе. Поэтому, если хотите, можете немного поэкспериментировать с различными методами класса и посмотреть, что в итоге получите в логе. А мы перейдем к следующей части статьи и рассмотрим свойства класса TCodeSiteLogger.
Свойства TCodeSiteLogger
Свойств у TCodeSiteLogger не много и все они, за исключением двух используются для повышения наглядности удобства чтения лога:
Что касается первых пяти свойств, то тут лучше показать как они работают, чем рассказывать. Например, с помощью свойств Category, CategoryColor можно создать вот такой лог:
Обратите внимание – при использовании свойства Category мы получили не только то, что каждое сообщение в логе содержит строку в столбце Category, но также и разделение всего лога по вкладкам, где каждая вкладка содержит сообщения отдельной категории.
Свойство Destination используется для того, чтобы указать объекту где и как будут обрабатываться сообщения. Ниже будет показан пример того, как, используя свойство Destination можно записывать лог в отдельный файл. Например, мы можем создать несколько объектов для ведения лога и каждому из них назначить свою категорию, одному задать через Destination запись лога в файл, второму в Live Viewer и т.д.
Запись лога в файл
Когда мы разрабатываем программу, то, как уже было сказано выше, наиболее удобно и комфортно использовать возможности Live Viewer’а. Однако, когда программа уже разошлась по пользователям, то для ведения лога работы программы этот просмотрщик логов уже не подойдет – надо будет писать лог в файл. Для чтения лога из файла предназначен второй viewer – File Viewer. Как заставить его работать?
Во-первых, нам надо “сказать” логгеру (TCodeSiteLogger), что данные будут записываться в файл. Делается это следующим образом:
1. Создаем, например, на OnCreate формы объект типа TCodeSiteDestination и для него следующие свойства:
Таким образом мы указали, что лог будет содержаться в файле “Log.csl”, который будет расположен в директории с программой. Теперь определим свойство Destination у CodeSite и запустим программу:
Можете закрыть Live Viewer, т.к. обновляться он не будет, а вместо этого открыть директорию с программой и убедиться, что по мере работы программы файл лога постепенно наполняется данными. В последствии, полученный лог можно будет открыть в File Viewer или добавить содержимое файла в Live Viewer.
При записи в файл Вы также можете указать ограничения на файл – максимальный размер в байтах или максимальное количество записей.
С записью в файл тоже вроде бы разобрались. Теперь более внимательно посмотрим на окно Viewer’а.
Работа с Live/File Viewer
Что касается работы с вьюверами, то тут, дума, для описания всех функций и возможностей даже в “урезанной” поставке CodeSite с RAD Studio XE2 не хватит ни сил не времени. Да и это, в принципе, незачем. Поэтому расскажу лишь про те функции, которые для меня сейчас наиболее полезны.
И первая функция – это сворачивание/разворачивание лога работы в отдельно методе. Как я уже говорил выше, для того, чтобы разграничить в логе места где выполняется како-либо код используются методы EnterMethod и ExitMethod. Для того, чтобы свернуть весь лог, находящийся между записями типа “вход/выход из метода” необходимо нажать Ctrl+Up или в выбрать в логе запись входа в метод и в контекстном меню нажать “Collapse Method“. Повторное нажатие Ctrl+Up развернет лог между метками входа/выхода. На рисунке ниже показан лог в котором часть сообщение “свернута”:
Как вы понимаете, функция сворачивания части лога будет очень полезна при работе с подробными логами работы, т.к. значительно облегчит поиск необходимой информации. Для работы же с самой информацией мне очень понравилась функция сравнения двух объектов одного типа. Работает она следующим образом.
На представленном выше рисунке Вы можете видеть, что в лог записывалась информация по объекту формы (Self). Если мы выберем в логе любую запись с этим объектом то в панели инспектора (справа) отобразятся все значения свойств этого объекта в момент отправки сообщения, т.е. инспектор будет выглядеть так:
Теперь зажимаем Ctrl и выбираем вторую запись с Self. В итоге в инспекторе будут отображены только те значения свойств, которые изменились:
Сразу видно, что у объекта сменились свойства ширины. По-моему отличная функция – экономит кучу времени при сравнении свойств объекта до и после какой-либо операции, а также помогает, в случае необходимости, быстро найти ошибки в работе и устранить их.
Вот пожалуй очень кратко о том, что за инструмент CodeSite и как им пользоваться. В заключение скажу, что после того как разобрался с работой CodeSite пожалел, что не использовал его ранее – инструмент очень даже неплохой, даже учитывая то, что это всего лишь Express-версия без таких “плюшек”, как просмотр коллекция ScratchPad и т.д. По крайней мере, используя его для логирования работы программы для работы с Google Docs (а там и сетевые подключения и потоков куча) я не нашел к чему бы придраться. В общем, если Вам срочно нужна хорошая система логирования – используйте CodeSite.
Журналирование или логирование в Delphi XE3
Передо мной возник вопрос, как логировать то, что происходит в программе в Delphi XE3. Причём мне нужно отписывать происходящие события не только в файл, но и в базу данных. Кроме того я хочу отписывать сообщения из двух приложений в один файл параллельно, т.е. из разных процессов. Поскольку за Delphi я не садился с далёкого 2000-го года, мне пришлось закатать рукава и заняться поисками, что появилось с тех давних времён.
Журналирование с помощью CodeSite
Изобретать велосипед и писать, что-то с нуля можно, но не очень хочется. Поэтому первое, что я посмотрел, это, а что есть в Delphi XE3 из коробки. Оказалось, что в комплект входит инструмент под названием CodeSite Express, т.е. урезанная версия CodeSite. Покупать я ничего не собирался и начал разбираться с экспресс-версией.
Для начала нужно – это подключить юнит CodeSiteLogging, и можно пользоваться методами глобального объекта CodeSite. Например, записать сообщение в лог:
При выполнении вышеприведённого кода автоматически всплывает окошко программы CodeSite Live Viewer с нашим сообщением.
Кроме того есть ещё много перегруженных вариантов функции Send. Например, можно записать сразу весь объект в журнал:
После этого вы сможете просмотреть все свойства объекта в момент записи в окне CodeSite Live Viewer на панели Inspector Pane, чтобы её открыть, нажмите на F11.
Режим работы CodeSite в которой вы сразу видите результат, это так называемый Live Logging. Теперь разберёмся с тем, как записывать журнал в файл, чтобы позже можно было анализировать его. Это делается так:
После выполнения этого кода окно CodeSite Live Viewer появляться не будет, зато в папке с исполняемым файлом создастся файл Log.csl, в котором будут содержаться все наши сообщения. Чтобы посмотреть этот файл просто откройте его в программе CodeSite Live Viewer.
Журналирование с помощью log4delphi или log4d
Здесь нужно пару слов сказать про систему логирования от Apache. Библиотеки log4… обладают широчайшими возможностями, они бесплатны, документированы и имеют открытые исходные коды. Журналы можно записывать в файл, в базу данных, в консоль (если у вас консольное приложение), отправлять сообщения командой netsend (для Windows) или на SMTP-сервер. Кроме того можно использовать фильтры и шаблоны сообщений.
Немного поискав в Интернете выяснилось, что есть две параллельные разработки log4delphi и log4d. Когда я начал скачивать исходники и бинарники библиотеки log4delphi (http://sourceforge.net/projects/log4delphi/files/log4delphi/), выяснилось, что последнее обновление библиотеки было 16.11.2010г. Для библиотеки log4d ещё более худшая ситуация: последние изменения файлов в архиве датируются от 11.06.2007, хотя последнее обновление архива стоит 29.04.2013. Ну, если они старые, это не значит, что плохие. Будем проверять.
Журналирование с помощью log4delphi
Теперь давайте разберёмся, что может и чего не может эта библиотека. Сразу начну с ложки дёгтя: библиотека log4delphi не поддерживает загрузку конфигурации из xml файла. Конфигурацию можно загружать из ini-файла или настраивать программно. Запись в базу данных происходит сразу, без буфферизации, плюс в SQL-запросе должны быть определённые параметры, а это неудобно. Кроме того не поддерживается запись сообщений в файл журнала из разных процессов (только монопольное владение файлом) и мало регулярных выражений для шаблонов. Всё это выяснилось при анализе исходного кода.
Но может быть кому-нибудь эта библиотека понравится. Здесь поддерживается запись сообщений в базу данных (посредством BDE, SqlExpr, InterBase Express) и в файл. Есть возможности формирования лога в виде обычного текстового файла, HTML-документа, XML-файла.
Журналирование с помощью log4d
Кроме того пришлось дополнить функцию TLogCustomLayout.Init:
И пришлось выкинуть из проекта файл Log4DNM.pas, т.к. компонентов NM… (а именно компонента TNMSMTP) теперь нет в Delphi. Это не страшно, т.к. есть юнит Log4DIndy.pas, который выполняет те же функции (отправляет сообщения на SMTP-сервер), только с помощью компонента TIdSMTP, который сразу поставляется вместе с Delphi XE3.
Также в юните Log4DXML.pas пришлось по-другому подключить библиотеку MSXML:
В этом же юните пришлось убрать два варианта функции _Set_documentLocator. После этого проект скомпилировался.
Теперь о возможностях этой библиотеки. Здесь нет возможности записи сообщений в базу данных и также не возможна запись сообщений в файл из разных процессов, зато есть вывод сообщений в дебаггер и есть отправка сообщений SMTP-серверу. Поддерживается загрузка конфигурации из XML-документа и из ini-файла. Есть возможности формирования обычного текстового файла и HTML-документа.
Не смотря на то, что в этой библиотеки нет записи в базу данных, эта библиотека мне понравилась больше. По своей внутренней структуре она ближе к log4j и log4net. Поэтому я решил остановиться на этой библиотеке и дописать те куски, которых мне не хватает.
В результате, после моих правок, библиотека log4d умеет записывать сообщений в базу данных посредством ADO-компонентов (юнит Log4DDB.pas) с возможностью буферизации (если кому то не нравится ADO, можете по аналогии дописать свой обработчик сообщений, используя желаемые компоненты), позволяет записывать сообщения в файл из разных процессов, причём допускаются разные привилегии. Также я добавил возможность подставлять в сообщения название приложения, имя текущего пользователя и имя компьютера, с помощью шаблона (класс TLogPatternLayout).
Версию библиотеки log4d с моими правками вы можете скачать здесь:
 log4d Версия:от 30.06.2019  | |
 25.01.2014  42.75 KB  2009 |  |
Теперь пару слов о том, как работать с библиотекой. Для начала библиотеку нужно сконфигурировать. Например, загрузить конфигурацию их xml-файла:
А вот и пример файла конфигурации (здесь указано, что сообщения будут переданы в хранимую процедуру SaveLogMessage и будут сохранены в текстовый файл App.log):
Можно сконфигурировать библиотеку log4d программно:
После того как библиотека сконфигурирована, можно писать сообщения:
Файл лога получится в данном примере примерно такой:
Вы так же можете поиграться с фильтрами, например, записывать ошибки в один файл, а остальные сообщения не записывать вообще или записывать в другой файл и т.п. В общем, вам решать, что и как использовать для логирования. Желаю успехов.
CodeSite Client Tools 3.0
Old versions
A key element to CodeSite’s effectiveness is that unlike message boxes and inspecting variables on breakpoints, CodeSite messages are not transient. The resulting log of messages provides valuable information for locating problem areas in your code.
In addition, sending CodeSite messages does not interrupt the flow of your application as happens when message boxes and breakpoints are used. As a result, CodeSite is much more effective in situations where user interactions (eg. focus changes) and painting issues need to be tracked.
CodeSite also addresses several shortcomings with traditional logging/tracing solutions. For example, CodeSite allows logging complex data structures and is not limited to simple strings. CodeSite also provides more control over what gets logged and when.
Instead of relying on arbitrary logging levels, separate loggers are used to categorize CodeSite messages. CodeSite also gives developers more flexibility in managing their logging information such as enabling multiple applications (or multiple instances of the same application) to send logging information to the same log file.
In addition, the CodeSite viewers, which are designed specifically for analyzing CodeSite logging messages, provide extensive, easy-to-use tools for analysis.
DevTools для «чайников»
Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.
Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).
Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу. Поэтому, если вы матерый разработчик, вас вряд ли заинтересует дальнейшее повествование. Хотя, вы можете поделиться своим богатым жизненным опытом в комментариях к публикации.
Говорим по понятиям
Инструменты разработчика (от англ. «development tools» или сокращённо «DevTools») ─ это программы, позволяющие создавать, тестировать и отлаживать (debug) программное обеспечение.
Современные браузеры, Safari, Firefox, Microsoft Edge, Chrome, Яндекс и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта. Отдельно устанавливать их не требуется. С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.
В правом углу размещенной выше иллюстрации можно увидеть структуру web-страницы и стили, примененные к текущему элементу.
Типичная веб-страница представляет собой текстовый файл в формате HTML, который определяет структуру и контент страницы, а также может содержать ссылки на файлы в других форматах (текст, графические изображения, видео, аудио, базы данных и др.), а также гиперссылки для быстрого перехода на другие веб-страницы или доступа к ссылочным файлам.
Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, образуют — веб-сайт. При этом образующие веб-сайт страницы могут находиться на одном или нескольких веб-серверах, которые могут располагаться в одном дата-центре или удаленно друг от друга, зачастую в разных странах.
HTML (англ. HyperText Markup Language) ─ это скелет веб-страницы. Для того, чтобы вся эта история начала двигаться и нужен Javascript (календарики, выпадающее меню, всплывающие окна, анимация и прочее, делается с помощью JS). Для придания странице божеского вида вам понадобится CSS (каскадные таблицы стилей).
Представим HTML-документ в простейшей форме:
Фактически HTML-документ состоит из элементов (строка с открывающим и закрывающим тегом и, собственно, само содержимое).
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров применяются атрибуты тегов, они содержат информацию, которую вы не хотите показывать в фактическом контенте.
Атрибут — используется для определения характеристик html-элемента и помещается внутри открывающего тега элемента. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Смотрите на пример ниже, в нем используется атрибут disabled, у которого явно не задано значение.
Если внутри какого-либо тега используется еще один или даже несколько других — это называется вложенность тегов html.
Вот тут еще можно подсмотреть описание HTML. Там доступно и наглядно все показано.
Используем DevTools на практике
Потрогать изначально скрытые браузером DevTools можно весьма просто, использовав сочетание клавиш или перейдя в раздел «Дополнительные инструменты / Инструменты Разработчика». Также можно ткнуть курсором в любое место страницы, нажать на правую клавишу мыши и выбрать «Просмотреть код».
Рассмотрим несколько вкладок из DevTools. И первый — режим эмуляции из мобильных устройств. Несмотря на десктопный браузер, страница у вас будет отображаться так, если бы вы на нее зашли с мобильного устройства. Вторая вкладка — Elements. Она демонстрирует структуру html страницы. С ее помощью браузер видит web-страницу после всего того, что с ней сделал Javascript. И Network — это сетевые запросы страницы (список web-ресурсов, загружаемых страницей для отображения демонстрируемого контента).
В панели Elements располагается дерево элементов. Здесь можно открывать теги, смотреть их содержимое, при этом в документе будет подсвечиваться текущий выбранный тег. Также можно посмотреть различные атрибуты, например, «Класс» или «Размер».
Загружаем картинки в Instagram с компьютера
С десктопа вы абсолютно спокойно можете посмотреть свою ленту в Instagram, полайкать посты, написать комментарии. Но вот загрузить фото или видео браузер вам не даст. Вот тут-то на помощь к вам и приходит режим эмуляции мобильных устройств.
Выбираем во вкладке наиболее понравившуюся вам модель телефона и вуаля (только не забудьте обновить страницу). Заблудиться в аскетичном интерфейсе Instagram сложно. Что делать тоже интуитивно понятно.
Скачиваем видео из Instagram Stories
С помощью DevTools задача скачать видео из сторис Instagram утрачивает свою сакральность. Все до безобразия элементарно. Переходим на вкладку Network. Для удобства выбираем фильтр Media. Он покажет аудио- и видеофайлы, которые запрашивает страница. А дальше запускаем понравившееся нам видеоизображение, с прямой ссылкой на место его хранения. Ну, а далее открываем его в новом табе и выбираем место его нового хранения (например, на вашем диске).
Скачиваем аудио с музыкальных сайтов
С помощью DevTools можно также прикоснуться и к музыкальным файлам. Механика аналогичная той, что описана выше.
Скачиваем фото из Instagram
В принципе ничего не мешает в случае понравившегося изображения сделать скриншот или попытаться «Сохранить изображение как», но качество и результативность этих упражнений устроит далеко не всех. Для пытливых умов опять-таки на помощь приходит инструментарий DevTools. Выбираем «Просмотреть код», находим ссылку на изображение в атрибуте src.
Второй способ через вкладку Network. Переходим по вкладке, ставим фильтр Img и обновляем страницу. Кстати, изображения можно отсортировать по размеру, контентные картинки, как правило, на странице самые большие по размеру. Точно также, правой клавишей кликаем на файл и «Сохранить как» в наиболее удобном для вас месте.
Удаление блокираторов контента
Бывает так, что хочется посмотреть какой-либо контент, но без регистрации сайт этого сделать не дает. И снова, здравствуйте DevTools. Обычно контент закрывается плашкой или прозрачным слоем. Открываем инструменты разработчика, определяем в коде блок-элемент закрывающий нужный нам участок контента и нажимаем Delete element.
Разблокировка форм ввода
Нередко всевозможные государственные структуры, разрабатывая на Javascript различные свои электронные формы для заполнения, препятствуют нашему любимому Copy/Paste (вставка и выделение текста). В этом случае снова приходится прибегать к помощи DevTools.
В инструментах разработчика идем в Настройки. Прокручиваем до поля Debugger и нажимаем галочку Disable JavaScript. Теперь можно вставлять текст.
Второй путь ─ открываем инструменты разработчика, нажимаем заветное сочетание клавиш и выбираем поиск по командам. Там выбираем JavaScript и одним из пунктов будет выключить JavaScript. Выключаем и радуемся жизни. Кстати, после вашего Copy/Paste JavaScript не помешало бы включить обратно, поскольку некоторые формы без него могут и не работать.
Версия для печати web-страниц
Надо признать, что сайтов, требующих использования описываемых дальше костылей, становится все меньше и меньше, но они по-прежнему периодически встречаются. Тем не менее, выбираем нужный нам сайт, удаляем во вкладке Elements через инструмент разработчика с помощью Delete elements ненужные элементы и части кода (реклама, контакты, ссылки и прочее). Далее отправляем все на печать и радуемся жизни.
Узнаем сохраненный пароль
Как узнать сохраненный пароль, если браузер автоматически его подставил в закрытом режиме? Можно через настройки залезть в пароли и отыскать все концы. Но мы не ищем легких путем. Снова на связи DevTools. Выделяем правой клавишей поле с вводом пароля, далее просмотреть код, после чего появляется достаточно типичная картина.
После этого находим атрибут type, кликаем дважды на значение Password и просто удаляем его. Далее поле ввода становится по умолчанию текстовым, и мы видим сохраненным пароль.
Скачиваем видео из вКонтакте
Предлагаемый ниже рецепт несколько хитрее, чем был в случае с Instagram stories ранее, но тоже вполне земной. Заходим на мобильную версию ресурса (по сути это два разных в сравнении с десктопной версией сайта). Открываем инструмент разработчика, заходим во вкладку Сеть, в фильтрах выбираем Прочее и включаем воспроизведение видео. Далее в списке появится ссылка на проигрываемое видео, ну а дальше по накатанной: правая клавиша мыши, открываем в новой вкладке и сохраняем в любимое место на компьютере.
Давайте чаще встречаться!
Следующий митап уже 23 апреля, можно прийти лично, если вы во Владимире, или посмотреть прямую трансляцию (все минувшие видео собраны тут). Кстати, в гостях у нас будет замечательный Никита Соболев.
Все актуальные события доступны в календаре мероприятий.
