Столкнулся со следующей проблемой при разработке. На одной из форм приложения есть ReCaptcha, и в DevTools Chrome при выборе элемента во вкладке "elements" показывается не исходный stylus файл, а конечный собранный CSS.
Код собирается gulp.
gulp.task(options.taskName, function() {
gulp.src(options.blobs)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(stylus({
'include css': true,
import: options.import,
use: [autoprefixer('last 2 version', 'ie 8', 'ie 9')]
}))
.pipe(concat(options.taskName + '.css'))
.pipe(sourcemaps.write({debug: true}))
.pipe(gulp.dest(options.destination));
});
Сделал 2 синтетических HTML файла:
Вариант без рекапчи:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/stylesheets/build/all.css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="test-block">
<div class="test-block__element">
abc
</div>
</div>
</body>
</html>
И вариант с рекапчей, похожий:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/stylesheets/build/all.css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="test-block">
<div class="test-block__element">
abc
</div>
</div>
<div data-theme='dark' class="g-recaptcha" data-sitekey="my-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=en"></script>
</body>
</html>
Без рекапчи в панели инструментов вижу:
В верстке с рекапчей:
Подскажите, пожалуйста, какие могут быть возможные причины такого странного поведения Chrome?
Простой