C
C
Chaos_Code2015-11-13 00:13:53
css
Chaos_Code, 2015-11-13 00:13:53

ReCAPTCHA breaks sourcemaps in chrome, how to fix it?

Faced the following problem during development. One of the application forms has ReCaptcha, and in DevTools Chrome, when you select an element in the "elements" tab, it shows not the original stylus file, but the final collected CSS.
The code is built by 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));
    });

Made 2 synthetic HTML files:
  • no recaptcha
  • with recaptcha

Option without recaptcha:
<!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>

And a variant with recaptcha, similar:
<!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>

Without recaptcha in the toolbar I see:
3d548e8a92fe46e6851458a37a936a0b.png
In layout with recaptcha: Tell me
10d63185dfb74eb78ab46e0ab55343f0.png
, please, what could be the possible reasons for this strange behavior of Chrome?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question